Hide autocomplete suggestions when textinput loses focus.

[nevara]

Hello,

I'm using this plugin for each column of my table. If I click into another textfield the autocomplete of the previous textfield is not hidden. It would be great to hide it.

[running-coder]

hey @nevara, when Typeahead looses focus the search results are hidden... the behavior can be tested on the demo page: http://www.runningcoder.org/jquerytypeahead/demo/

[running-coder]

If you can provide a demo with the behaviour you are describing it would be great. Meanwhile I'll leave this one closed as cannot reproduce

[nevara]

Hi Tom, Happy New Years! I created a demo for you: https://jsfiddle.net/7ubdb09s/ It’s missing your CSS, but the issue is shown. Thanks for replying! On 2 Jan 2017, at 17:45, Tom Bertrand <notifications@github.com<mailto:notifications@github.com>> wrote: If you can provide a demo with the behaviour you are describing it would be great. Meanwhile I'll leave this one closed as cannot reproduce — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub<#270 (comment)>, or mute the thread<https://github.com/notifications/unsubscribe-auth/ARm3H9vs-CER2MtmT9CJJdOv9w7lYxSgks5rOSmigaJpZM4LRqo7>.

[running-coder]

Hey @nevara thanks, Happy new years also!

I've looked into the issue and it is due to 2 things, first if you look into your console and type "Typeahead", each init needs it's unique selector. Also the selector property was removed in jQuery3 https://api.jquery.com/selector/.

I've made a demo from yours that fixes the issue using "input" option and a unique selector per Typeahead init. I'll add a custom attribute in future release to bypass this "hack" but meanwhile you can use it like this: https://jsfiddle.net/runningcoder/peqgn4fa/

[nevara]

Thanks! It works!
Only thing is, when clicking into a typeahead input, the datatable sorting mechanism is triggered. Before, I could stop it with

$('input', this.header()).on('click', function (e) { // exclude input field from sorting trigger.
e.stopPropagation();
});

but with that code, the typeahead is not hidden, thus the original problem appears.

It seems to be mainly an datatable issue, but I cannot find any solution disabling the sorting trigger for the datatable. (I still want sorting, but only when clicking the sorting arrows or in the header).

[running-coder]

oh, perhaps you can try to catch the TH click when it's on the input (event.target.nodeName) and destroy the event + trigger a manual Typeahead focus Typeahead[inputname].node.trigger('focus.typeahead') or trigger an input click (you might have to experiment a couple things). This might not work but worth a try... Unfortunately I do not support behaviour from other plugins when mixed with Typeahead, that would be too much work and exceptions..

[nevara]

Thanks! I solved it by turning the header into a footer.