CODEWITHSUNDEEP
autocompletedrupal-7
Ryan Price
Ryan Price

Reputation: 315

Drupal autocomplete submit on selection of suggestion

I've followed the tutorial at this site: http://thedrupalblog.com/creating-autocomplete-field-using-forms-api-and-menu-callback and have my autocomplete working great.

What I'm not sure how to do and can't seem to find online is have the form submit when a user clicks a suggestion instead of simply completing that field.

Thanks in advance.

Upvotes: 2

Views: 6749

Answers (6)

Fazeela Abu Zohra
Fazeela Abu Zohra

Reputation: 641

Suppose you have a two fields such as title, description. We assume both the fields do not have html tags in it. We have set up a view to list the title and description. We also have a title as the exposed filter with auto complete. 

jQuery('html').on('click touchstart','.ui-autocomplete li a', function(e){
          var text = jQuery(this).html();
          jQuery('.form-autocomplete').val(text);
          jQuery('.form-autocomplete').parent().parent('form').submit();
      });

Most detailed version is at, https://www.drupal.org/node/2852380

Upvotes: -1

botimer
botimer

Reputation: 641

As of 7.36 / Issue #365241, this is much better supported by triggering an autocompleteSelect event on selection.

If you are using the Ajax framework, you can catch this and the change event for the three main types of field commitment (click, enter, tab on updated value), e.g.:

$field = array(
    // ...
    '#ajax' => array(
      // ...
      'event' => 'change autocompleteSelect',
    ),
);

Otherwise, you can catch the event from custom script. It is triggered on the edit element (after update) with an additional parameter of a one-element array of the selected node.

Upvotes: 0

Trey
Trey

Reputation: 5520

This may not be the best "drupal" way to do it, maybe someone can improve it...

in your 'misc/autocomplete.js' file find:

Drupal.jsAC.prototype.select = function (node) {
  this.input.value = $(node).data('autocompleteValue');
};

and change it to :

Drupal.jsAC.prototype.select = function (node) {
  this.input.value = $(node).data('autocompleteValue');
  if(jQuery(this.input).hasClass('auto_submit')){
      this.input.form.submit();
  }
};

then on your form item add:

'#attributes' => array('class'=> array('auto_submit')),

That will cause the form to submit regardless of how the user chooses to select (enter button or mouse click)

EDIT: 4 years later I got a vote up and realized this needs to be updated...basically @Azhar is right, rather than editing the existing file, this code should be added to a new JS file that loads after autocomplete.js.

As is true any time you edit the core you run into having to worry about core security updates which would override your change and leave your site broken and you scrambling to fix it again.

Upvotes: 6

user2616862
user2616862

Reputation: 31

This only works if you click the autocomplete suggestion, not if you select it by keyboard.

To catch both keyboard and mouse selections override the hidePopup method.

// Autosubmit on keyboard & click.
Drupal.jsAC.prototype.hidePopup = function (keycode) {
    // Select item if the right key or mousebutton was pressed.
    if (this.selected && ((keycode && keycode != 46 && keycode != 8 && keycode != 27) || !keycode)) {
      this.input.value = $(this.selected).data('autocompleteValue');
      if (jQuery(this.input).hasClass('auto-submit')) {
        this.input.form.submit();
      }
    }
    // Hide popup.
    var popup = this.popup;
    if (popup) {
      this.popup = null;
      $(popup).fadeOut('fast', function () { $(popup).remove(); });
    }
    this.selected = false;
    $(this.ariaLive).empty();
  };

Upvotes: 1

Baris Wanschers
Baris Wanschers

Reputation: 160

Or, if you want to enable it on all autocomplete forms without having to use a form alter, you can use the following snippet below in your JS file:

Drupal.jsAC.prototype.select = function (node) {
  this.input.value = $(node).data('autocompleteValue');
  if(jQuery(this.input).hasClass('form-autocomplete')){
    this.input.form.submit();
  }
};

Upvotes: 0

Azhar
Azhar

Reputation: 101

Following code will override the "Drupal.jsAC.prototype.select" function, and this can be use in any JS file without modifying misc/autocomplete.js.

 $(document).ready(function(){
      Drupal.jsAC.prototype.select = function (node) {
        this.input.value = $(node).data('autocompleteValue');
        if(jQuery(this.input).hasClass('auto_submit')){
          this.input.form.submit();
        }
      };
    });

Upvotes: 10

Related Questions