Attach a handler to the “event” of autocomplete select with jQuery

Question

I'm using Views Autocomplete Filters on an exposed node title field. I would like to attach a handler to the "event" when the user selects one element from the autocomplete list without applying this patch which would actually trigger a "real" event.

For the simplest example: if the user has selected one element from the autocomplete list, show an alert() message. (I wouldn't do that because it's ugly, but it's the easiest demonstration of the solution.)

Answer 1

I had a similar issue with a Drupal autocomplete field I had created, where I wanted the form submitted when an item from the dropdown was selected.

This blog post addressed the issue for me: http://othermachines.com/blog/smart-autocomplete-navigation-drupal-7

The relevant JQuery code you'll want to look at on that page is this:

(function ($) {

  Drupal.behaviors.programmeSearch = {
    attach: function (context) {

      $('#edit-autocomplete-field').focus(
        function(){
          $(this).val('');
      });

      $("#edit-autocomplete-field", context).bind('autocompleteSelect', function(event, node) {

        var key = $(node).data('autocompleteValue');
        var label = $(node).text();

        // If matches found...
        if (key != '0') {

          // Set the value of this field.
          $(this).val(label);

          // Redirect user to entity path.
          window.location = Drupal.settings.basePath + key;
        }
        else {

          // If no matches, reset.
          $(this).val('');
          $(this).focus();
        }
      });
    }
  };

})(jQuery);

You probably won't need all of that code. Whatever you want to happen on the select event, put in the condition beginning with

if (key != '0') {