Allow auto complete suggestion links to work

I haver made a little patch to trigger the event when suggestions are displayd and click event are set. The event is on the input field.
If you bind a handler for this event, you can unbind the click event from 'a' elements.

I'm curious though. @modstore, does the above patch fix the issue you're describing? I am not sure if I fully understand what the issue is here.

Hi,

I'm having the same problem too. Here's the problem with screenshots.

The first screenshot is the homepage of our company intranet. It has a user search box.
When adding keywords, in this case, my firstname 'pol', the autocomplete system display a div with results under it.
These results are the result of a view. The firstname of the people in the results is a link to their profile.
When clicking on that link, instead of going to the user profile, it fills in the search box with the value of the result, just like in the second screenshot.

This is not a bug, but the intended behavior is to follow the link.

You can find related code here especially in this loop:

  for (var key in matches) {
    $('<li></li>')
      .html($('<a href="#"></a>').html(matches[key]).click(function (e) { e.preventDefault(); }))
      .mousedown(function () { ac.select(this); })
      .mouseover(function () { ac.highlight(this); })
      .mouseout(function () { ac.unhighlight(this); })
      .data('autocompleteValue', key)
      .appendTo(ul);
  }

I'm now trying to find a way to override this behavior, comments are welcome.

I have found a workaround, it removes the js/misc/autocomplete.js from Bootstrap theme until I've found a better solution.

This hook has to be in template.php from your theme.

function HOOK_js_alter(&$javascript) {
  $theme_path = drupal_get_path('theme', 'bootstrap');

  foreach($javascript as $js => $data) {
    if ($data['data'] === $theme_path . '/js/misc/autocomplete.js') {
      unset($javascript[$js]);
    }
  }
}

@Pol your workaround worked for me, but there are throbbers filling up the whole input box, I think that can be fixed with some CSS.
I am curious whether you have found another workaround for this issue yet?

My question in #2 hasn't been answered.

I have found a workaround, it removes the js/misc/autocomplete.js from Bootstrap theme until I've found a better solution.

Just removing something because it isn't "working" is rarely a solution to an issue. Please don't hi-jack an issue if you don't actually plan on helping fix it.

@markcarver I have the exact same issue and the patch in #1 did not fix it.
From what @Pol provided, I had a look at bootstrap/js/misc/autocomplete.js line 97
.html($('<a href="#"></a>').html(matches[key]).click(function (e) { e.preventDefault(); }))
It's the function (e) { e.preventDefault(); } that prevents the click and follow up to result page behavior. Removing this function and things work as @modstore expected. Tested on bootstrap 7.x-35 and also dev.
I hope this helps pinpoint the issue and way to fix it.

The comments from #3 and onward should actually be fixed by the above related issue.

The OP's question pertaining to:

I want to be able to click on the result and the result's a href will be followed directly to the result page.

Normally that isn't how these work. That being said (and going off of what #2 suggests), you could whip up some custom JS that binds a listener for the autocompleteSelect event on the input element:

$('.form-autocomplete . form-text').on('autocompleteSelect', function (e) {
  var value = $(this).val();
  // Do whatever you want with the value here.
});

Hi Mark,

The link in #3 is wrong, the link is actually this one, for D7.

My knowledge in JS is limited but I think it's not possible to do:

$('.form-autocomplete . form-text').on('autocompleteSelect', function (e) {
  var value = $(this).val();
  // Do whatever you want with the value here.
});

Because of the e.preventDefault();.

Let me know if you have a better solution that I can implement and give feedback here.

Thanks.

It isn't wrong. The reason e.preventDefault() exists is so that the page doesn't jump to the link's blank anchor: #. This doesn't prevent the mousedown event from reaching the parent <li>, which is what e.stopPropagation() would be used for.

What the above related issue changed was:

.mousedown(function () { ac.select(this); })

to

.on('mousedown', function () { ac.hidePopup(this); })

Specifically, ac.select(this) to ac.hidePopup(this).

The .hidePopup method invokes the .select method, which ultimately triggers the autocompleteSelect even on the input element.

See: http://cgit.drupalcode.org/drupal/tree/misc/autocomplete.js?h=7.x#n117

Thanks Mark,

I tried to add:

$('#ID_OF_MY_INPUT').on('autocompleteSelect', function (e) {
  console.log('hello');
});

I also removed the code who suppress the autocomplete.js from the theme (from comment #4)

But it doesn't display anything in the console after selecting the text.
I'm still looking into it.

Are you placing the code in a DOM ready wrapper, or better yet, a Drupal behavior?

I literally just tested the following code and it works perfectly: https://monosnap.com/file/1yrnrohYiUj73d454BzyzzOTdg3jdx

(function($, Drupal){
  'use strict';

  Drupal.behaviors.autocompleteTrigger = {
    attach: function(context) {
      $(context).find('.form-autocomplete .form-text').once('autocomplete-trigger', function () {
        var $input = $(this);
        $input.on('autocompleteSelect', function (e) {
          console.log(e);
        });
      });
  };

})(jQuery, Drupal);

Hi I would like to know how to theme autocomplete search box.