New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Hide autocomplete suggestions when textinput loses focus. #270

Closed
nevara opened this Issue Dec 20, 2016 · 11 comments

Comments

Projects
None yet
3 participants
@nevara

nevara commented Dec 20, 2016

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

This comment has been minimized.

Owner

running-coder commented Dec 22, 2016

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

This comment has been minimized.

Owner

running-coder commented Jan 2, 2017

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

This comment has been minimized.

nevara commented Jan 3, 2017

@running-coder

This comment has been minimized.

Owner

running-coder commented Jan 3, 2017

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/.

screen shot 2017-01-03 at 11 28 37 am

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/

@running-coder running-coder reopened this Jan 3, 2017

@running-coder running-coder added this to the 2.8.0 milestone Jan 3, 2017

@nevara

This comment has been minimized.

nevara commented Jan 3, 2017

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

This comment has been minimized.

Owner

running-coder commented Jan 3, 2017

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

This comment has been minimized.

nevara commented Jan 4, 2017

@running-coder

This comment has been minimized.

Owner

running-coder commented Jan 4, 2017

cool, let me know if anything

@running-coder

This comment has been minimized.

Owner

running-coder commented Jan 4, 2017

Leaving this opened to fix the selector for jquery3

running-coder added a commit that referenced this issue Jan 18, 2017

@kavin-90

This comment has been minimized.

kavin-90 commented Jan 18, 2017

I use jquery 3 and have no problem with my old codes everything is superb.

I'm using version 2.7.4 (2016-12-8)

@running-coder

This comment has been minimized.

Owner

running-coder commented Jan 18, 2017

The issue is caused by $(element).selector being removed in jquery3, this caused issues when multiple typeahead on 1 page from not closing themselves when focus out and since selector is used to create window.Typeahead[SELECTOR] it was given the name of undefined, you could only have 1 referenced in the window scope for manual manipulations

In most cases people were only having 1 instance per page and wouldn't do advanced modifications so the issue went unnoticed

running-coder added a commit that referenced this issue Mar 1, 2017

Version 2.8.0

Features

- #302 `cache`, `compression` and `ttl` can now be configured at group level
- #299, #304 Add `templateValue` option
- #280 Default suggestions, added suggestion_v1 demo
- #275 Dynamic sources, each groups can now be configured to be `dynamic: true`
- #284 Added option `blurOnTab` to blur Typeahead when "Tab" key is pressed
- #262 Add `onDropdownFilter` callback
- Add `maxLength` option

Fixes

- #297 Duplicated entries in dropdown filters
- #286 Using dynamic, groupOrder and groupTemplate options, the results are empty after the second search
- #285 "undefined" is appearing in the template when a key is not defined instead of empty string
- #283 issue when Ajax `path` config is left blank
- #281 multi level deep data inside the source objects
- #274 onCancel event
- #270 Hide autocomplete suggestions when text input loses focus

running-coder added a commit that referenced this issue Mar 1, 2017

Version 2.8.0
Features
- #302 `cache`, `compression` and `ttl` can now be configured at group level
- #299, #304 Add `templateValue` option
- #280 Default suggestions, added suggestion_v1 demo
- #275 Dynamic sources, each groups can now be configured to be `dynamic: true`
- #284 Added option `blurOnTab` to blur Typeahead when "Tab" key is pressed
- #262 Add `onDropdownFilter` callback
- Add `maxLength` option

Fixes
- #297 Duplicated entries in dropdown filters
- #286 Using dynamic, groupOrder and groupTemplate options, the results are empty after the second search
- #285 "undefined" is appearing in the template when a key is not defined instead of empty string
- #283 issue when Ajax `path` config is left blank
- #281 multi level deep data inside the source objects
- #274 onCancel event
- #270 Hide autocomplete suggestions when text input loses focus
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment