Advanced Search

Drupal Autocomplete Auto Submit

/ Published in: jQuery
Save to your folder(s)
This overrides a couple core Drupal functions in the autocomplete.js file. It changes the behavior of the autocomplete such that if a user selects an item from the autocomplete menu, it takes them directly to that node instead of just populating the search field.

Please note that this implementation is not totally bulletproof; as you can see, there is a little bit of jank happening in Drupal.jsAC.prototype.select to check if the item is numeric. This is because I had to pull the nid from the input field, not from the jQuery object as desired. If anyone has a solution for this, please leave a comment.

Expand | Embed | Plain Text

Copy this code and paste it in your HTML 
  1. // We're wrapping our overrides in a $(document).ready() so that it gets called
  2. // after Drupal's base JS stuff (otherwise it wouldn't be overwritten).
  3. $(document).ready(function() {
  4.  
  5.   /**
  6.    * Override of Drupal.jsAC.prototype.found. The only difference is that we
  7.    * are adding a link to each item in the autocomplete menu.
  8.    */
  9.   Drupal.jsAC.prototype.found = function (matches) {
  10.     // If no value in the textfield, do not show the popup.
  11.     if (!this.input.value.length) {
  12.       return false;
  13.     }
  14.  
  15.     // Prepare matches
  16.     var ul = document.createElement('ul');
  17.     var ac = this;
  18.     for (key in matches) {
  19.       var li = document.createElement('li');
  20.       $(li)
  21.         .html('<div>'+ matches[key] +'</div>')
  22.         // Note that we are passing in this.nid into ac.select.
  23.         .mousedown(function () { ac.select(this, this.nid); })
  24.         .mouseover(function () { ac.highlight(this); })
  25.         .mouseout(function () { ac.unhighlight(this); });
  26.       li.autocompleteValue = key;
  27.       // Adding the nid of the item to the li object.
  28.       li.nid = key;
  29.       $(ul).append(li);
  30.     }
  31.  
  32.     // Show popup with matches, if any
  33.     if (this.popup) {
  34.       if (ul.childNodes.length > 0) {
  35.         $(this.popup).empty().append(ul).show();
  36.       }
  37.       else {
  38.         $(this.popup).css({visibility: 'hidden'});
  39.         this.hidePopup();
  40.       }
  41.     }
  42.   };
  43.  
  44.   /**
  45.    * Overwriting this object from autocomplete.js. We're made it take a second
  46.    * parameter, and changed the behavior of the function.
  47.    */
  48.   Drupal.jsAC.prototype.select = function (node, nid) {
  49.     if (isNaN(nid) == false) {
  50.       window.location = 'http://apgcashdrawer.com/node/' + nid;
  51.     }
  52.   };
  53.  
  54.   /**
  55.    * Handler for the "keyup" event. Overwritten to call this.select when the
  56.    * enter key is pressed.
  57.    */
  58.   Drupal.jsAC.prototype.onkeyup = function (input, e) {
  59.     if (!e) {
  60.       e = window.event;
  61.     }
  62.     switch (e.keyCode) {
  63.       case 16: // shift
  64.       case 17: // ctrl
  65.       case 18: // alt
  66.       case 20: // caps lock
  67.       case 33: // page up
  68.       case 34: // page down
  69.       case 35: // end
  70.       case 36: // home
  71.       case 37: // left arrow
  72.       case 38: // up arrow
  73.       case 39: // right arrow
  74.       case 40: // down arrow
  75.         return true;
  76.  
  77.       case 13: // enter
  78.         // Note we are using event.target.value here because the nid from above
  79.         // is not available in this function.
  80.         this.select(this,e.target.value);
  81.       case 9:  // tab
  82.       case 27: // esc
  83.         this.hidePopup(e.keyCode);
  84.         return true;
  85.  
  86.       default: // all other keys
  87.         if (input.value.length > 0)
  88.           this.populatePopup();
  89.         else
  90.           this.hidePopup(e.keyCode);
  91.           return true;
  92.     }
  93.   };
  94.  
  95. });

URL: http://iamtheunraveler.com

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.