Return to Snippet

Revision: 25763
at April 8, 2010 14:25 by unravelme1


Initial Code
// We're wrapping our overrides in a $(document).ready() so that it gets called
// after Drupal's base JS stuff (otherwise it wouldn't be overwritten).
$(document).ready(function() {

  /**
   * Override of Drupal.jsAC.prototype.found. The only difference is that we
   * are adding a link to each item in the autocomplete menu.
   */
  Drupal.jsAC.prototype.found = function (matches) {
    // If no value in the textfield, do not show the popup.
    if (!this.input.value.length) {
      return false;
    }
    
    // Prepare matches
    var ul = document.createElement('ul');
    var ac = this;
    for (key in matches) {
      var li = document.createElement('li');
      $(li)
        .html('<div>'+ matches[key] +'</div>')
        // Note that we are passing in this.nid into ac.select.
        .mousedown(function () { ac.select(this, this.nid); })
        .mouseover(function () { ac.highlight(this); })
        .mouseout(function () { ac.unhighlight(this); });
      li.autocompleteValue = key;
      // Adding the nid of the item to the li object.
      li.nid = key;
      $(ul).append(li);
    }

    // Show popup with matches, if any
    if (this.popup) {
      if (ul.childNodes.length > 0) {
        $(this.popup).empty().append(ul).show();
      }
      else {
        $(this.popup).css({visibility: 'hidden'});
        this.hidePopup();
      }
    }
  };

  /**
   * Overwriting this object from autocomplete.js. We're made it take a second
   * parameter, and changed the behavior of the function.
   */
  Drupal.jsAC.prototype.select = function (node, nid) {
    if (isNaN(nid) == false) {
      window.location = 'http://apgcashdrawer.com/node/' + nid;
    }
  };

  /**
   * Handler for the "keyup" event. Overwritten to call this.select when the
   * enter key is pressed.
   */
  Drupal.jsAC.prototype.onkeyup = function (input, e) {
    if (!e) {
      e = window.event;
    }
    switch (e.keyCode) {
      case 16: // shift
      case 17: // ctrl
      case 18: // alt
      case 20: // caps lock
      case 33: // page up
      case 34: // page down
      case 35: // end
      case 36: // home
      case 37: // left arrow
      case 38: // up arrow
      case 39: // right arrow
      case 40: // down arrow
        return true;
      
      case 13: // enter
        // Note we are using event.target.value here because the nid from above
        // is not available in this function.
        this.select(this,e.target.value);
      case 9:  // tab
      case 27: // esc
        this.hidePopup(e.keyCode);
        return true;

      default: // all other keys
        if (input.value.length > 0)
          this.populatePopup();
        else
          this.hidePopup(e.keyCode);
          return true;
    }
  };

});

Initial URL
http://iamtheunraveler.com

Initial Description
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.

Initial Title
Drupal Autocomplete Auto Submit

Initial Tags
jquery, drupal

Initial Language
jQuery