js2/mwEmbed/jquery/plugins/jquery.autocomplete.js

   1 (function($){
   2
   3 jQuery.autocomplete = function(input, options) {
   4         // Create a link to self
   5         var me = this;
   6
   7         // Create jQuery object for input element
   8         var $input = $(input).attr("autocomplete", "off");
   9
  10         // Apply inputClass if necessary
  11         if (options.inputClass) $input.addClass(options.inputClass);
  12
  13         // Create results
  14         if(!options.resultElem){
  15                 var results = document.createElement("div");
  16                 // Create jQuery object for results
  17                 var $results = $(results);
  18                 // Add to body element
  19                 $("body").append(results);
  20                 $results.hide().addClass(options.resultsClass).css("position", "absolute");
  21                 if( options.width > 0 ) $results.css("width", options.width);
  22         }else{
  23                 var results = $j(options.resultElem).get(0);
  24                 var $results = $j(options.resultElem);
  25                 $results.hide();
  26         }
  27
  28
  29         input.autocompleter = me;
  30
  31         var timeout = null;
  32         var prev = "";
  33         var active = -1;
  34         var cache = {};
  35         var keyb = false;
  36         var hasFocus = false;
  37         var lastKeyPressCode = null;
  38
  39         // flush cache
  40         function flushCache(){
  41                 cache = {};
  42                 cache.data = {};
  43                 cache.length = 0;
  44         };
  45
  46         // flush cache
  47         flushCache();
  48
  49         // if there is a data array supplied
  50         if( options.data != null ){
  51                 var sFirstChar = "", stMatchSets = {}, row = [];
  52
  53                 // no url was specified, we need to adjust the cache length to make sure it fits the local data store
  54                 if( typeof options.url != "string" ) options.cacheLength = 1;
  55
  56                 // loop through the array and create a lookup structure
  57                 for( var i=0; i < options.data.length; i++ ){
  58                         // if row is a string, make an array otherwise just reference the array
  59                         row = ((typeof options.data[i] == "string") ? [options.data[i]] : options.data[i]);
  60
  61                         // if the length is zero, don't add to list
  62                         if( row[0].length > 0 ){
  63                                 // get the first character
  64                                 sFirstChar = row[0].substring(0, 1).toLowerCase();
  65                                 // if no lookup array for this character exists, look it up now
  66                                 if( !stMatchSets[sFirstChar] ) stMatchSets[sFirstChar] = [];
  67                                 // if the match is a string
  68                                 stMatchSets[sFirstChar].push(row);
  69                         }
  70                 }
  71
  72                 // add the data items to the cache
  73                 for( var k in stMatchSets ){
  74                         // increase the cache size
  75                         options.cacheLength++;
  76                         // add to the cache
  77                         addToCache(k, stMatchSets[k]);
  78                 }
  79         }
  80
  81         $input
  82         .keydown(function(e) {
  83                 // track last key pressed
  84                 lastKeyPressCode = e.keyCode;
  85                 switch(e.keyCode) {
  86                         case 38: // up
  87                                 e.preventDefault();
  88                                 moveSelect(-1);
  89                                 break;
  90                         case 40: // down
  91                                 e.preventDefault();
  92                                 moveSelect(1);
  93                                 break;
  94                         case 9:  // tab
  95                         case 13: // return
  96                                 if( selectCurrent() ){
  97                                         // make sure to blur off the current field
  98                                         $input.get(0).blur();
  99                                         e.preventDefault();
 100                                 }
 101                                 break;
 102                         default:
 103                                 active = -1;
 104                                 if (timeout) clearTimeout(timeout);
 105                                 timeout = setTimeout(function(){onChange();}, options.delay);
 106                                 break;
 107                 }
 108         })
 109         .focus(function(){
 110                 // track whether the field has focus, we shouldn't process any results if the field no longer has focus
 111                 hasFocus = true;
 112         })
 113         .blur(function() {
 114                 // track whether the field has focus
 115                 hasFocus = false;
 116                 hideResults();
 117         });
 118
 119         hideResultsNow();
 120
 121         function onChange() {
 122                 // ignore if the following keys are pressed: [del] [shift] [capslock]
 123                 if( lastKeyPressCode == 46 || (lastKeyPressCode > 8 && lastKeyPressCode < 32) ) return $results.hide();
 124                 var v = $input.val();
 125                 if (v == prev) return;
 126                 prev = v;
 127                 if (v.length >= options.minChars) {
 128                         $input.addClass(options.loadingClass);
 129                         requestData(v);
 130                 } else {
 131                         $input.removeClass(options.loadingClass);
 132                         $results.hide();
 133                 }
 134         };
 135
 136         function moveSelect(step) {
 137                 var lis = $("li", results);
 138                 if (!lis) return;
 139
 140                 active += step;
 141
 142                 if (active < 0) {
 143                         active = 0;
 144                 } else if (active >= lis.size()) {
 145                         active = lis.size() - 1;
 146                 }
 147
 148                 lis.removeClass("ac_over");
 149
 150                 $(lis[active]).addClass("ac_over");
 151
 152                 // Weird behaviour in IE
 153                 // if (lis[active] && lis[active].scrollIntoView) {
 154                 //      lis[active].scrollIntoView(false);
 155                 // }
 156
 157         };
 158         function selectCurrent() {
 159                 var li = $("li.ac_over", results)[0];
 160                 if (!li) {
 161                         var $li = $("li", results);
 162                         if (options.selectOnly) {
 163                                 if ($li.length == 1) li = $li[0];
 164                         } else if (options.selectFirst) {
 165                                 li = $li[0];
 166                         }
 167                 }
 168                 if (li) {
 169                         selectItem(li);
 170                         return true;
 171                 } else {
 172                         return false;
 173                 }
 174         };
 175
 176         function selectItem(li) {
 177                 if (!li) {
 178                         li = document.createElement("li");
 179                         li.extra = [];
 180                         li.selectValue = "";
 181                 }
 182                 var v = $.trim(li.selectValue ? li.selectValue : li.innerHTML);
 183                 input.lastSelected = v;
 184                 prev = v;
 185                 $results.html("");
 186                 $input.val(v);
 187                 hideResultsNow();
 188                 if (options.onItemSelect) setTimeout(function() { options.onItemSelect(li) }, 1);
 189         };
 190
 191         // selects a portion of the input string
 192         function createSelection(start, end){
 193                 // get a reference to the input element
 194                 var field = $input.get(0);
 195                 if( field.createTextRange ){
 196                         var selRange = field.createTextRange();
 197                         selRange.collapse(true);
 198                         selRange.moveStart("character", start);
 199                         selRange.moveEnd("character", end);
 200                         selRange.select();
 201                 } else if( field.setSelectionRange ){
 202                         field.setSelectionRange(start, end);
 203                 } else {
 204                         if( field.selectionStart ){
 205                                 field.selectionStart = start;
 206                                 field.selectionEnd = end;
 207                         }
 208                 }
 209                 field.focus();
 210         };
 211
 212         // fills in the input box w/the first match (assumed to be the best match)
 213         function autoFill(sValue){
 214                 // if the last user key pressed was backspace, don't autofill
 215                 if( lastKeyPressCode != 8 ){
 216                         // fill in the value (keep the case the user has typed)
 217                         $input.val($input.val() + sValue.substring(prev.length));
 218                         // select the portion of the value not typed by the user (so the next character will erase)
 219                         createSelection(prev.length, sValue.length);
 220                 }
 221         };
 222
 223         function showResults() {
 224                 // get the position of the input field right now (in case the DOM is shifted)
 225                 var pos = findPos(input);
 226                 // either use the specified width, or autocalculate based on form element
 227                 var iWidth = (options.width > 0) ? options.width : $input.width();
 228                 // reposition
 229                 if(!options.resultElem){
 230                         $results.css({
 231                                 width: parseInt(iWidth) + "px",
 232                                 top: (pos.y + input.offsetHeight) + "px",
 233                                 left: pos.x + "px"
 234                         }).show();
 235                 }else{
 236                         $results.show();
 237                 }
 238                 if(options.resultContainer){
 239                         $(options.resultContainer).css({top: (pos.y + input.offsetHeight) + "px",
 240                                 left: (pos.x- parseInt(iWidth)) + "px"}).show();
 241                 }
 242         };
 243
 244         function hideResults() {
 245                 if (timeout) clearTimeout(timeout);
 246                 timeout = setTimeout(hideResultsNow, 200);
 247         };
 248
 249         function hideResultsNow() {
 250                 if (timeout) clearTimeout(timeout);
 251                 $input.removeClass(options.loadingClass);
 252                 if ($results.is(":visible")) {
 253                         $results.hide();
 254                 }
 255                 if(options.resultContainer){
 256                         $(options.resultContainer).hide();
 257                 }
 258                 if (options.mustMatch) {
 259                         var v = $input.val();
 260                         if (v != input.lastSelected) {
 261                                 selectItem(null);
 262                         }
 263                 }
 264         };
 265
 266         function receiveData(q, data) {
 267                 if (data) {
 268                         $input.removeClass(options.loadingClass);
 269                         results.innerHTML = "";
 270
 271                         // if the field no longer has focus or if there are no matches, do not display the drop down
 272                         if( !hasFocus || data.length == 0 ) return hideResultsNow();
 273
 274                         //messes with layout & ie7 does not have this problem
 275                         /*if ($.browser.msie) {
 276                                 // we put a styled iframe behind the calendar so HTML SELECT elements don't show through
 277                                 $results.append(document.createElement('iframe'));
 278                         }*/
 279                         results.appendChild(dataToDom(data));
 280                         // autofill in the complete box w/the first match as long as the user hasn't entered in more data
 281                         if( options.autoFill && ($input.val().toLowerCase() == q.toLowerCase()) ) autoFill(data[0][0]);
 282                         showResults();
 283                 } else {
 284                         hideResultsNow();
 285                 }
 286         };
 287
 288         function parseData(data) {
 289                 if (!data) return null;
 290                 var parsed = [];
 291                 var rows = data.split(options.lineSeparator);
 292                 for (var i=0; i < rows.length; i++) {
 293                         var row = $.trim(rows[i]);
 294                         if (row) {
 295                                 parsed[parsed.length] = row.split(options.cellSeparator);
 296                         }
 297                 }
 298                 return parsed;
 299         };
 300
 301         function dataToDom(data) {
 302                 var ul = document.createElement("ul");
 303                 if(options.ul_class)$(ul).addClass(options.ul_class);
 304
 305                 var num = data.length;
 306
 307                 // limited results to a max number
 308                 if( (options.maxItemsToShow > 0) && (options.maxItemsToShow < num) ) num = options.maxItemsToShow;
 309
 310                 for (var i=0; i < num; i++) {
 311                         var row = data[i];
 312                         if (!row) continue;
 313                         var li = document.createElement("li");
 314                         if (options.formatItem) {
 315                                 li.innerHTML = options.formatItem(row, i, num);
 316                                 li.selectValue = row[0];
 317                         } else {
 318                                 li.innerHTML = row[0];
 319                                 li.selectValue = row[0];
 320                         }
 321                         var extra = null;
 322                         if (row.length > 1) {
 323                                 extra = [];
 324                                 for (var j=1; j < row.length; j++) {
 325                                         extra[extra.length] = row[j];
 326                                 }
 327                         }
 328                         li.extra = extra;
 329                         ul.appendChild(li);
 330                         $(li).hover(
 331                                 function() { $("li", ul).removeClass("ac_over"); $(this).addClass("ac_over"); active = $("li", ul).indexOf($(this).get(0)); },
 332                                 function() { $(this).removeClass("ac_over"); }
 333                         ).click(function(e) { e.preventDefault(); e.stopPropagation(); selectItem(this) });
 334                 }
 335                 return ul;
 336         };
 337
 338         function requestData(q) {
 339                 if (!options.matchCase) q = q.toLowerCase();
 340                 //var data = options.cacheLength ? loadFromCache(q) : null;
 341                 var data=null;
 342                 // recieve the cached data
 343                 if (data) {
 344                         receiveData(q, data);
 345                 // if an AJAX url has been supplied, try loading the data now
 346                 } else if( (typeof options.url == "string") && (options.url.length > 0) ){
 347                         $.get(makeUrl(q), function(data) {
 348                                 data = parseData(data);
 349                                 addToCache(q, data);
 350                                 receiveData(q, data);
 351                         });
 352                 // if there's been no data found, remove the loading class
 353                 } else {
 354                         $input.removeClass(options.loadingClass);
 355                 }
 356         };
 357
 358         function makeUrl(q) {
 359                 var url = options.url + "?"+options.paramName+'='+ encodeURI(q);
 360                 for (var i in options.extraParams) {
 361                         url += "&" + i + "=" + encodeURI(options.extraParams[i]);
 362                 }
 363                 return url;
 364         };
 365
 366         function loadFromCache(q) {
 367                 if (!q) return null;
 368                 if (typeof cache.data[q]!='undefined'){
 369                         return cache.data[q];
 370                 }
 371                 if (options.matchSubset) {
 372                         for (var i = q.length - 1; i >= options.minChars; i--) {
 373                                 var qs = q.substr(0, i);
 374                                 var c = cache.data[qs];
 375                                 if (c) {
 376                                         var csub = [];
 377                                         for (var j = 0; j < c.length; j++) {
 378                                                 var x = c[j];
 379                                                 var x0 = x[0];
 380                                                 if (matchSubset(x0, q)) {
 381                                                         csub[csub.length] = x;
 382                                                 }
 383                                         }
 384                                         return csub;
 385                                 }
 386                         }
 387                 }
 388                 return null;
 389         };
 390
 391         function matchSubset(s, sub) {
 392                 if (!options.matchCase) s = s.toLowerCase();
 393                 var i = s.indexOf(sub);
 394                 if (i == -1) return false;
 395                 return i == 0 || options.matchContains;
 396         };
 397
 398         this.flushCache = function() {
 399                 flushCache();
 400         };
 401
 402         this.setExtraParams = function(p) {
 403                 options.extraParams = p;
 404         };
 405
 406         this.findValue = function(){
 407                 var q = $input.val();
 408
 409                 if (!options.matchCase) q = q.toLowerCase();
 410                 var data = options.cacheLength ? loadFromCache(q) : null;
 411                 if (data) {
 412                         findValueCallback(q, data);
 413                 } else if( (typeof options.url == "string") && (options.url.length > 0) ){
 414                         $.get(makeUrl(q), function(data) {
 415                                 data = parseData(data)
 416                                 addToCache(q, data);
 417                                 findValueCallback(q, data);
 418                         });
 419                 } else {
 420                         // no matches
 421                         findValueCallback(q, null);
 422                 }
 423         }
 424
 425         function findValueCallback(q, data){
 426                 if (data) $input.removeClass(options.loadingClass);
 427
 428                 var num = (data) ? data.length : 0;
 429                 var li = null;
 430
 431                 for (var i=0; i < num; i++) {
 432                         var row = data[i];
 433
 434                         if( row[0].toLowerCase() == q.toLowerCase() ){
 435                                 li = document.createElement("li");
 436                                 if (options.formatItem) {
 437                                         li.innerHTML = options.formatItem(row, i, num);
 438                                         li.selectValue = row[0];
 439                                 } else {
 440                                         li.innerHTML = row[0];
 441                                         li.selectValue = row[0];
 442                                 }
 443                                 var extra = null;
 444                                 if( row.length > 1 ){
 445                                         extra = [];
 446                                         for (var j=1; j < row.length; j++) {
 447                                                 extra[extra.length] = row[j];
 448                                         }
 449                                 }
 450                                 li.extra = extra;
 451                         }
 452                 }
 453
 454                 if( options.onFindValue ) setTimeout(function() { options.onFindValue(li) }, 1);
 455         }
 456
 457         function addToCache(q, data) {
 458                 if (!data || !q || !options.cacheLength) return;
 459                 if (!cache.length || cache.length > options.cacheLength) {
 460                         flushCache();
 461                         cache.length++;
 462                 } else if (!cache[q]) {
 463                         cache.length++;
 464                 }
 465                 cache.data[q] = data;
 466         };
 467
 468         function findPos(obj) {
 469                 var curleft = obj.offsetLeft || 0;
 470                 var curtop = obj.offsetTop || 0;
 471                 while (obj = obj.offsetParent) {
 472                         curleft += obj.offsetLeft
 473                         curtop += obj.offsetTop
 474                 }
 475                 return {x:curleft,y:curtop};
 476         }
 477 }
 478 })(jQuery);
 479
 480 jQuery.fn.autocomplete = function(url, options, data) {
 481         // Make sure options exists
 482         options = options || {};
 483         // Set url as option
 484         options.url = url;
 485         // set some bulk local data
 486         options.data = ((typeof data == "object") && (data.constructor == Array)) ? data : null;
 487
 488         // Set default values for required options
 489         options.resultElem = options.resultElem || null;
 490         options.paramName = options.paramName || 'q';
 491
 492         options.inputClass = options.inputClass || "ac_input";
 493         options.resultsClass = options.resultsClass || "ac_results";
 494         options.lineSeparator = options.lineSeparator || "\n";
 495         options.cellSeparator = options.cellSeparator || "|";
 496         options.minChars = options.minChars || 1;
 497         options.delay = options.delay || 400;
 498         options.matchCase = options.matchCase || 0;
 499         options.matchSubset = options.matchSubset || 1;
 500         options.matchContains = options.matchContains || 0;
 501         options.cacheLength = options.cacheLength || 1;
 502         options.mustMatch = options.mustMatch || 0;
 503         options.extraParams = options.extraParams || {};
 504         options.loadingClass = options.loadingClass || "ac_loading";
 505         options.selectFirst = options.selectFirst || false;
 506         options.selectOnly = options.selectOnly || false;
 507         options.maxItemsToShow = options.maxItemsToShow || -1;
 508         options.autoFill = options.autoFill || false;
 509         options.width = parseInt(options.width, 10) || 0;
 510
 511         this.each(function() {
 512                 var input = this;
 513                 new jQuery.autocomplete(input, options);
 514         });
 515
 516         // Don't break the chain
 517         return this;
 518 }
 519
 520 jQuery.fn.autocompleteArray = function(data, options) {
 521         return this.autocomplete(null, options, data);
 522 }
 523
 524 jQuery.fn.indexOf = function(e){
 525         for( var i=0; i<this.length; i++ ){
 526                 if( this[i] == e ) return i;
 527         }
 528         return -1;
 529 };