[Summary view] [Print] [Text view]

   1  /*
   2   *    jquery.suggest 1.1b - 2007-08-06
   3   * Patched by Mark Jaquith with Alexander Dick's "multiple items" patch to allow for auto-suggesting of more than one tag before submitting
   4   * See: http://www.vulgarisoip.com/2007/06/29/jquerysuggest-an-alternative-jquery-based-autocomplete-library/#comment-7228
   5   *
   6   *    Uses code and techniques from following libraries:
   7   *    1. http://www.dyve.net/jquery/?autocomplete
   8   *    2. http://dev.jquery.com/browser/trunk/plugins/interface/iautocompleter.js
   9   *
  10   *    All the new stuff written by Peter Vulgaris (www.vulgarisoip.com)
  11   *    Feel free to do whatever you want with this file
  12   *
  13   */
  14  
  15  (function($) {
  16  
  17      $.suggest = function(input, options) {
  18          var $input, $results, timeout, prevLength, cache, cacheSize;
  19  
  20          $input = $(input).attr("autocomplete", "off");
  21          $results = $(document.createElement("ul"));
  22  
  23          timeout = false;        // hold timeout ID for suggestion results to appear
  24          prevLength = 0;            // last recorded length of $input.val()
  25          cache = [];                // cache MRU list
  26          cacheSize = 0;            // size of cache in chars (bytes?)
  27  
  28          $results.addClass(options.resultsClass).appendTo('body');
  29  
  30  
  31          resetPosition();
  32          $(window)
  33              .load(resetPosition)        // just in case user is changing size of page while loading
  34              .resize(resetPosition);
  35  
  36          $input.blur(function() {
  37              setTimeout(function() { $results.hide() }, 200);
  38          });
  39  
  40  
  41          // help IE users if possible
  42          if ( $.browser.msie ) {
  43              try {
  44                  $results.bgiframe();
  45              } catch(e) { }
  46          }
  47  
  48          // I really hate browser detection, but I don't see any other way
  49          if ($.browser.mozilla)
  50              $input.keypress(processKey);    // onkeypress repeats arrow keys in Mozilla/Opera
  51          else
  52              $input.keydown(processKey);        // onkeydown repeats arrow keys in IE/Safari
  53  
  54  
  55  
  56  
  57  		function resetPosition() {
  58              // requires jquery.dimension plugin
  59              var offset = $input.offset();
  60              $results.css({
  61                  top: (offset.top + input.offsetHeight) + 'px',
  62                  left: offset.left + 'px'
  63              });
  64          }
  65  
  66  
  67  		function processKey(e) {
  68  
  69              // handling up/down/escape requires results to be visible
  70              // handling enter/tab requires that AND a result to be selected
  71              if ((/27$|38$|40$/.test(e.keyCode) && $results.is(':visible')) ||
  72                  (/^13$|^9$/.test(e.keyCode) && getCurrentResult())) {
  73  
  74                  if (e.preventDefault)
  75                      e.preventDefault();
  76                  if (e.stopPropagation)
  77                      e.stopPropagation();
  78  
  79                  e.cancelBubble = true;
  80                  e.returnValue = false;
  81  
  82                  switch(e.keyCode) {
  83  
  84                      case 38: // up
  85                          prevResult();
  86                          break;
  87  
  88                      case 40: // down
  89                          nextResult();
  90                          break;
  91  
  92                      case 9:  // tab
  93                      case 13: // return
  94                          selectCurrentResult();
  95                          break;
  96  
  97                      case 27: //    escape
  98                          $results.hide();
  99                          break;
 100  
 101                  }
 102  
 103              } else if ($input.val().length != prevLength) {
 104  
 105                  if (timeout)
 106                      clearTimeout(timeout);
 107                  timeout = setTimeout(suggest, options.delay);
 108                  prevLength = $input.val().length;
 109  
 110              }
 111  
 112  
 113          }
 114  
 115  
 116  		function suggest() {
 117  
 118              var q = $.trim($input.val()), multipleSepPos, items;
 119  
 120              if ( options.multiple ) {
 121                  multipleSepPos = q.lastIndexOf(options.multipleSep);
 122                  if ( multipleSepPos != -1 ) {
 123                      q = q.substr(multipleSepPos + options.multipleSep.length);
 124                  }
 125              }
 126              if (q.length >= options.minchars) {
 127  
 128                  cached = checkCache(q);
 129  
 130                  if (cached) {
 131  
 132                      displayItems(cached['items']);
 133  
 134                  } else {
 135  
 136                      $.get(options.source, {q: q}, function(txt) {
 137  
 138                          $results.hide();
 139  
 140                          items = parseTxt(txt, q);
 141  
 142                          displayItems(items);
 143                          addToCache(q, items, txt.length);
 144  
 145                      });
 146  
 147                  }
 148  
 149              } else {
 150  
 151                  $results.hide();
 152  
 153              }
 154  
 155          }
 156  
 157  
 158  		function checkCache(q) {
 159              var i;
 160              for (i = 0; i < cache.length; i++)
 161                  if (cache[i]['q'] == q) {
 162                      cache.unshift(cache.splice(i, 1)[0]);
 163                      return cache[0];
 164                  }
 165  
 166              return false;
 167  
 168          }
 169  
 170  		function addToCache(q, items, size) {
 171              var cached;
 172              while (cache.length && (cacheSize + size > options.maxCacheSize)) {
 173                  cached = cache.pop();
 174                  cacheSize -= cached['size'];
 175              }
 176  
 177              cache.push({
 178                  q: q,
 179                  size: size,
 180                  items: items
 181                  });
 182  
 183              cacheSize += size;
 184  
 185          }
 186  
 187  		function displayItems(items) {
 188              var html = '', i;
 189              if (!items)
 190                  return;
 191  
 192              if (!items.length) {
 193                  $results.hide();
 194                  return;
 195              }
 196  
 197              resetPosition(); // when the form moves after the page has loaded
 198  
 199              for (i = 0; i < items.length; i++)
 200                  html += '<li>' + items[i] + '</li>';
 201  
 202              $results.html(html).show();
 203  
 204              $results
 205                  .children('li')
 206                  .mouseover(function() {
 207                      $results.children('li').removeClass(options.selectClass);
 208                      $(this).addClass(options.selectClass);
 209                  })
 210                  .click(function(e) {
 211                      e.preventDefault();
 212                      e.stopPropagation();
 213                      selectCurrentResult();
 214                  });
 215  
 216          }
 217  
 218  		function parseTxt(txt, q) {
 219  
 220              var items = [], tokens = txt.split(options.delimiter), i, token;
 221  
 222              // parse returned data for non-empty items
 223              for (i = 0; i < tokens.length; i++) {
 224                  token = $.trim(tokens[i]);
 225                  if (token) {
 226                      token = token.replace(
 227                          new RegExp(q, 'ig'),
 228                          function(q) { return '<span class="' + options.matchClass + '">' + q + '</span>' }
 229                          );
 230                      items[items.length] = token;
 231                  }
 232              }
 233  
 234              return items;
 235          }
 236  
 237  		function getCurrentResult() {
 238              var $currentResult;
 239              if (!$results.is(':visible'))
 240                  return false;
 241  
 242              $currentResult = $results.children('li.' + options.selectClass);
 243  
 244              if (!$currentResult.length)
 245                  $currentResult = false;
 246  
 247              return $currentResult;
 248  
 249          }
 250  
 251  		function selectCurrentResult() {
 252  
 253              $currentResult = getCurrentResult();
 254  
 255              if ($currentResult) {
 256                  if ( options.multiple ) {
 257                      if ( $input.val().indexOf(options.multipleSep) != -1 ) {
 258                          $currentVal = $input.val().substr( 0, ( $input.val().lastIndexOf(options.multipleSep) + options.multipleSep.length ) );
 259                      } else {
 260                          $currentVal = "";
 261                      }
 262                      $input.val( $currentVal + $currentResult.text() + options.multipleSep);
 263                      $input.focus();
 264                  } else {
 265                      $input.val($currentResult.text());
 266                  }
 267                  $results.hide();
 268  
 269                  if (options.onSelect)
 270                      options.onSelect.apply($input[0]);
 271  
 272              }
 273  
 274          }
 275  
 276  		function nextResult() {
 277  
 278              $currentResult = getCurrentResult();
 279  
 280              if ($currentResult)
 281                  $currentResult
 282                      .removeClass(options.selectClass)
 283                      .next()
 284                          .addClass(options.selectClass);
 285              else
 286                  $results.children('li:first-child').addClass(options.selectClass);
 287  
 288          }
 289  
 290  		function prevResult() {
 291              var $currentResult = getCurrentResult();
 292  
 293              if ($currentResult)
 294                  $currentResult
 295                      .removeClass(options.selectClass)
 296                      .prev()
 297                          .addClass(options.selectClass);
 298              else
 299                  $results.children('li:last-child').addClass(options.selectClass);
 300  
 301          }
 302      }
 303  
 304      $.fn.suggest = function(source, options) {
 305  
 306          if (!source)
 307              return;
 308  
 309          options = options || {};
 310          options.multiple = options.multiple || false;
 311          options.multipleSep = options.multipleSep || ", ";
 312          options.source = source;
 313          options.delay = options.delay || 100;
 314          options.resultsClass = options.resultsClass || 'ac_results';
 315          options.selectClass = options.selectClass || 'ac_over';
 316          options.matchClass = options.matchClass || 'ac_match';
 317          options.minchars = options.minchars || 2;
 318          options.delimiter = options.delimiter || '\n';
 319          options.onSelect = options.onSelect || false;
 320          options.maxCacheSize = options.maxCacheSize || 65536;
 321  
 322          this.each(function() {
 323              new $.suggest(this, options);
 324          });
 325  
 326          return this;
 327  
 328      };
 329  
 330  })(jQuery);