| 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);
|
|---|
