Posted By

unravelme1 on 04/08/10

Tagged

Versions (?)

Last Edited at 04/08/10 02:25pm

Statistics

Viewed 590 times

Favorited by 1 user(s)

Related snippets

Drupal Autocomplete Auto Submit

/ Published in: jQuery

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.

Highlighted TextExpand

// 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;
    }
  };

});

URL: http://iamtheunraveler.com

Report this snippet Tweet