1 (function ($) {

     2 

     3 /**

     4  * Attaches the autocomplete behavior to all required fields.

     5  */

     6 Drupal.behaviors.autocomplete = {

     7   attach: function (context, settings) {

     8     var acdb = [];

     9     $('input.autocomplete', context).once('autocomplete', function () {

    10       var uri = this.value;

    11       if (!acdb[uri]) {

    12         acdb[uri] = new Drupal.ACDB(uri);

    13       }

    14       var $input = $('#' + this.id.substr(0, this.id.length - 13))

    15         .attr('autocomplete', 'OFF')

    16         .attr('aria-autocomplete', 'list');

    17       $($input[0].form).submit(Drupal.autocompleteSubmit);

    18       $input.parent()

    19         .attr('role', 'application')

    20         .append($('<span class="element-invisible" aria-live="assertive"></span>')

    21           .attr('id', $input.attr('id') + '-autocomplete-aria-live')

    22         );

    23       new Drupal.jsAC($input, acdb[uri]);

    24     });

    25   }

    26 };

    27 

    28 /**

    29  * Prevents the form from submitting if the suggestions popup is open

    30  * and closes the suggestions popup when doing so.

    31  */

    32 Drupal.autocompleteSubmit = function () {

    33   return $('#autocomplete').each(function () {

    34     this.owner.hidePopup();

    35   }).length == 0;

    36 };

    37 

    38 /**

    39  * An AutoComplete object.

    40  */

    41 Drupal.jsAC = function ($input, db) {

    42   var ac = this;

    43   this.input = $input[0];

    44   this.ariaLive = $('#' + this.input.id + '-autocomplete-aria-live');

    45   this.db = db;

    46 

    47   $input

    48     .keydown(function (event) { return ac.onkeydown(this, event); })

    49     .keyup(function (event) { ac.onkeyup(this, event); })

    50     .blur(function () { ac.hidePopup(); ac.db.cancel(); });

    51 

    52 };

    53 

    54 /**

    55  * Handler for the "keydown" event.

    56  */

    57 Drupal.jsAC.prototype.onkeydown = function (input, e) {

    58   if (!e) {

    59     e = window.event;

    60   }

    61   switch (e.keyCode) {

    62     case 40: // down arrow.

    63       this.selectDown();

    64       return false;

    65     case 38: // up arrow.

    66       this.selectUp();

    67       return false;

    68     default: // All other keys.

    69       return true;

    70   }

    71 };

    72 

    73 /**

    74  * Handler for the "keyup" event.

    75  */

    76 Drupal.jsAC.prototype.onkeyup = function (input, e) {

    77   if (!e) {

    78     e = window.event;

    79   }

    80   switch (e.keyCode) {

    81     case 16: // Shift.

    82     case 17: // Ctrl.

    83     case 18: // Alt.

    84     case 20: // Caps lock.

    85     case 33: // Page up.

    86     case 34: // Page down.

    87     case 35: // End.

    88     case 36: // Home.

    89     case 37: // Left arrow.

    90     case 38: // Up arrow.

    91     case 39: // Right arrow.

    92     case 40: // Down arrow.

    93       return true;

    94 

    95     case 9:  // Tab.

    96     case 13: // Enter.

    97     case 27: // Esc.

    98       this.hidePopup(e.keyCode);

    99       return true;

   100 

   101     default: // All other keys.

   102       if (input.value.length > 0 && !input.readOnly) {

   103         this.populatePopup();

   104       }

   105       else {

   106         this.hidePopup(e.keyCode);

   107       }

   108       return true;

   109   }

   110 };

   111 

   112 /**

   113  * Puts the currently highlighted suggestion into the autocomplete field.

   114  */

   115 Drupal.jsAC.prototype.select = function (node) {

   116   this.input.value = $(node).data('autocompleteValue');

   117   $(this.input).trigger('autocompleteSelect', [node]);

   118 };

   119 

   120 /**

   121  * Highlights the next suggestion.

   122  */

   123 Drupal.jsAC.prototype.selectDown = function () {

   124   if (this.selected && this.selected.nextSibling) {

   125     this.highlight(this.selected.nextSibling);

   126   }

   127   else if (this.popup) {

   128     var lis = $('li', this.popup);

   129     if (lis.length > 0) {

   130       this.highlight(lis.get(0));

   131     }

   132   }

   133 };

   134 

   135 /**

   136  * Highlights the previous suggestion.

   137  */

   138 Drupal.jsAC.prototype.selectUp = function () {

   139   if (this.selected && this.selected.previousSibling) {

   140     this.highlight(this.selected.previousSibling);

   141   }

   142 };

   143 

   144 /**

   145  * Highlights a suggestion.

   146  */

   147 Drupal.jsAC.prototype.highlight = function (node) {

   148   if (this.selected) {

   149     $(this.selected).removeClass('selected');

   150   }

   151   $(node).addClass('selected');

   152   this.selected = node;

   153   $(this.ariaLive).html($(this.selected).html());

   154 };

   155 

   156 /**

   157  * Unhighlights a suggestion.

   158  */

   159 Drupal.jsAC.prototype.unhighlight = function (node) {

   160   $(node).removeClass('selected');

   161   this.selected = false;

   162   $(this.ariaLive).empty();

   163 };

   164 

   165 /**

   166  * Hides the autocomplete suggestions.

   167  */

   168 Drupal.jsAC.prototype.hidePopup = function (keycode) {

   169   // Select item if the right key or mousebutton was pressed.

   170   if (this.selected && ((keycode && keycode != 46 && keycode != 8 && keycode != 27) || !keycode)) {

   171     this.select(this.selected);

   172   }

   173   // Hide popup.

   174   var popup = this.popup;

   175   if (popup) {

   176     this.popup = null;

   177     $(popup).fadeOut('fast', function () { $(popup).remove(); });

   178   }

   179   this.selected = false;

   180   $(this.ariaLive).empty();

   181 };

   182 

   183 /**

   184  * Positions the suggestions popup and starts a search.

   185  */

   186 Drupal.jsAC.prototype.populatePopup = function () {

   187   var $input = $(this.input);

   188   var position = $input.position();

   189   // Show popup.

   190   if (this.popup) {

   191     $(this.popup).remove();

   192   }

   193   this.selected = false;

   194   this.popup = $('<div id="autocomplete"></div>')[0];

   195   this.popup.owner = this;

   196   $(this.popup).css({

   197     top: parseInt(position.top + this.input.offsetHeight, 10) + 'px',

   198     left: parseInt(position.left, 10) + 'px',

   199     width: $input.innerWidth() + 'px',

   200     display: 'none'

   201   });

   202   $input.before(this.popup);

   203 

   204   // Do search.

   205   this.db.owner = this;

   206   this.db.search(this.input.value);

   207 };

   208 

   209 /**

   210  * Fills the suggestion popup with any matches received.

   211  */

   212 Drupal.jsAC.prototype.found = function (matches) {

   213   // If no value in the textfield, do not show the popup.

   214   if (!this.input.value.length) {

   215     return false;

   216   }

   217 

   218   // Prepare matches.

   219   var ul = $('<ul></ul>');

   220   var ac = this;

   221   for (key in matches) {

   222     $('<li></li>')

   223       .html($('<div></div>').html(matches[key]))

   224       .mousedown(function () { ac.hidePopup(this); })

   225       .mouseover(function () { ac.highlight(this); })

   226       .mouseout(function () { ac.unhighlight(this); })

   227       .data('autocompleteValue', key)

   228       .appendTo(ul);

   229   }

   230 

   231   // Show popup with matches, if any.

   232   if (this.popup) {

   233     if (ul.children().length) {

   234       $(this.popup).empty().append(ul).show();

   235       $(this.ariaLive).html(Drupal.t('Autocomplete popup'));

   236     }

   237     else {

   238       $(this.popup).css({ visibility: 'hidden' });

   239       this.hidePopup();

   240     }

   241   }

   242 };

   243 

   244 Drupal.jsAC.prototype.setStatus = function (status) {

   245   switch (status) {

   246     case 'begin':

   247       $(this.input).addClass('throbbing');

   248       $(this.ariaLive).html(Drupal.t('Searching for matches...'));

   249       break;

   250     case 'cancel':

   251     case 'error':

   252     case 'found':

   253       $(this.input).removeClass('throbbing');

   254       break;

   255   }

   256 };

   257 

   258 /**

   259  * An AutoComplete DataBase object.

   260  */

   261 Drupal.ACDB = function (uri) {

   262   this.uri = uri;

   263   this.delay = 300;

   264   this.cache = {};

   265 };

   266 

   267 /**

   268  * Performs a cached and delayed search.

   269  */

   270 Drupal.ACDB.prototype.search = function (searchString) {

   271   var db = this;

   272   this.searchString = searchString;

   273 

   274   // See if this string needs to be searched for anyway. The pattern ../ is

   275   // stripped since it may be misinterpreted by the browser.

   276   searchString = searchString.replace(/^\s+|\.{2,}\/|\s+$/g, '');

   277   // Skip empty search strings, or search strings ending with a comma, since

   278   // that is the separator between search terms.

   279   if (searchString.length <= 0 ||

   280     searchString.charAt(searchString.length - 1) == ',') {

   281     return;

   282   }

   283 

   284   // See if this key has been searched for before.

   285   if (this.cache[searchString]) {

   286     return this.owner.found(this.cache[searchString]);

   287   }

   288 

   289   // Initiate delayed search.

   290   if (this.timer) {

   291     clearTimeout(this.timer);

   292   }

   293   this.timer = setTimeout(function () {

   294     db.owner.setStatus('begin');

   295 

   296     // Ajax GET request for autocompletion. We use Drupal.encodePath instead of

   297     // encodeURIComponent to allow autocomplete search terms to contain slashes.

   298     $.ajax({

   299       type: 'GET',

   300       url: db.uri + '/' + Drupal.encodePath(searchString),

   301       dataType: 'json',

   302       success: function (matches) {

   303         if (typeof matches.status == 'undefined' || matches.status != 0) {

   304           db.cache[searchString] = matches;

   305           // Verify if these are still the matches the user wants to see.

   306           if (db.searchString == searchString) {

   307             db.owner.found(matches);

   308           }

   309           db.owner.setStatus('found');

   310         }

   311       },

   312       error: function (xmlhttp) {

   313         Drupal.displayAjaxError(Drupal.ajaxError(xmlhttp, db.uri));

   314       }

   315     });

   316   }, this.delay);

   317 };

   318 

   319 /**

   320  * Cancels the current autocomplete request.

   321  */

   322 Drupal.ACDB.prototype.cancel = function () {

   323   if (this.owner) this.owner.setStatus('cancel');

   324   if (this.timer) clearTimeout(this.timer);

   325   this.searchString = '';

   326 };

   327 

   328 })(jQuery);