Typeahead.js: Dropdown closes and reopens on keypress with remote dataset

[ndreckshage]

You can see this with the best pictures example here

Start typing 'broadway' (pre 1960 example that is not prefetched). At 'bro' it will be isolated from prefetched data. then each additional letter ('a', 'd', ...) will close + reopen dropdown with same value.

[jharding]

Whenever the query changes, the suggestions are cleared, thus closing (well, hiding) the dropdown menu. New suggestions are then requested and when they become available, they are rendered causing the dropdown menu to appear again.

What behavior are you expecting here?

[ndreckshage]

To me it seems like it might be better for the dropdown to stay open, and have the results replaced. Then if there are 0/fewer results, close/resize. This way the dropdown wouldnt flash/flicker. So if you continue typing a word it would appear more natural, only eliminating other results as you specify the query

[jharding]

But let's say your typeahead is backed by a dataset that only draws suggestions from a remote endpoint and let's say it takes a few seconds for this endpoint to respond. If you type bro and then quickly change the query to bas, suggestions for bro would stick around for a few seconds until the remote endpoint responded. That seems wrong to me.

I do agree that the flickering of the menu is less than ideal, I'm just not sure how to go about addressing it. Right now I think the best way to prevent flickering is to take advantage of prefetching.

[ndreckshage]

Prefetched is great solution, but struggles a bit with large datasets. For my purposes it works better for say, a weekly generated list of most popular terms, etc.

What about updating a localstorage key with most recent dataset and comparing new query against localstorage values. Then, leave matches, until dataset updated with server data? That way if someone switches from bro to bas, terms wouldn't match, and dropdown could be hidden. But if they do continue with broa, terms would hit and keep dropdown open.

[kings55]

Hey any chance you guys figured out how to implement this? Even if not included in supported code, would like to include myself. I just want it to stay open until ajax request completes, since I'm only using remote.

[jharding]

I currently don't have a lot of time to work on typeahead.js so there's no way this is going to be resolved within the next week. Your best bet would be to fork typeahead.js and hack together your own solution for the time being.

[ndreckshage]

you can do something like

comment out !cacheHit && cb && cb(suggestions) since remote only. this will stop the empty suggestion that calls clear_suggestions

i then added a new trigger for "queryMinLength" rather than just "queryChanged" (if using minlength. so that we can run clear suggestions at certain point.)

and then for typeahead view i changed .on("queryChanged", this._clear... to on("queryMinLength and on("queryChanged whiteSpaceChanged", this._updateHint

not ideal, but it works. hope it helps

[Fibonacci-Solucoes-Ageis]

I need this feature too.

[janwidmer]

Hi,

I am also using a Remote Source only and this feature would be great. Has there be any Decission or Discussion around there recently?

Thanks
Jan

[b4umel]

@ndreckshage

Hi Ndreckshage

I facing same problem..................from last 3 days try to solve this problem

Please send me changes code

I dont clearly understand this line :

on("queryChanged", this.clear... to on("queryMinLength and on("queryChanged whiteSpaceChanged", this.updateHint

[andy3rdworld]

@ndreckshage

Are you willing to share your code for the fix?

[andy3rdworld]

Here's a quick hack for my use case (data populated from remote only) to remove flickering. Use with caution.

// old
_compareQueryToInputValue: function() {
    var inputValue = this.getInputValue(), isSameQuery = compareQueries(this.query, inputValue), isSameQueryExceptWhitespace = isSameQuery ? this.query.length !== inputValue.length : false;
    if (isSameQueryExceptWhitespace) {
        this.trigger("whitespaceChanged", {
        value: this.query
        });
    } else if (!isSameQuery) {
        this.trigger("queryChanged", {
        value: this.query = inputValue
        });
    }
},

// new
_compareQueryToInputValue: function() {
    var inputValue = this.getInputValue(), isSameQuery = compareQueries(this.query, inputValue), isSameQueryExceptWhitespace = isSameQuery ? this.query.length !== inputValue.length : false;
    if (isSameQueryExceptWhitespace) {
        this.trigger("whitespaceChanged", {
        value: this.query
        });
    } else if (!isSameQuery) {
        this.trigger("queryChanged", {
        value: this.query = inputValue
        });
        if (this.query.length == 0 || inputValue.length == 0) { // added
        this.trigger("queryZeroLength", {
            value: this.query
        });
        }
    }
},

// old
}).on("focused", this._openDropdown).on("blured", this._closeDropdown).on("blured", this._setInputValueToQuery).on("enterKeyed tabKeyed", this._handleSelection).on("queryChanged", this._clearHint).on("queryChanged", this._clearSuggestions).on("queryChanged", this._getSuggestions).on("whitespaceChanged", this._updateHint).on("queryChanged whitespaceChanged", this._openDropdown).on("queryChanged whitespaceChanged", this._setLanguageDirection).on("escKeyed", this._closeDropdown).on("escKeyed", this._setInputValueToQuery).on("tabKeyed upKeyed downKeyed", this._managePreventDefault).on("upKeyed downKeyed", this._moveDropdownCursor).on("upKeyed downKeyed", this._openDropdown).on("tabKeyed leftKeyed rightKeyed", this._autocomplete);

// new
}).on("focused", this._openDropdown).on("blured", this._closeDropdown).on("blured", this._setInputValueToQuery).on("enterKeyed tabKeyed", this._handleSelection)
                .on("queryChanged", this._clearHint)
                //.on("queryChanged", this._clearSuggestions) // removed
                .on("queryZeroLength", this._clearSuggestions) // added
                .on("queryChanged", this._getSuggestions)
                .on("whitespaceChanged", this._updateHint)
                .on("queryChanged whitespaceChanged", this._openDropdown)
                .on("queryChanged whitespaceChanged", this._setLanguageDirection)
                .on("escKeyed", this._closeDropdown).on("escKeyed", this._setInputValueToQuery).on("tabKeyed upKeyed downKeyed", this._managePreventDefault).on("upKeyed downKeyed", this._moveDropdownCursor).on("upKeyed downKeyed", this._openDropdown).on("tabKeyed leftKeyed rightKeyed", this._autocomplete);

[HaNdTriX]

This feature would be great.
I love typeahead but I had to use jquery-ui autocomplete to solve the remote data-source issue in my app.
http://jsfiddle.net/handtrix/32Bck/

[admin-4virtuals]

@andy3rdworld Thanks for that bit of code. That was the easiest fix without any problems.

[martijnsenden]

I need this feature too. The flickering is annoying. Too me it is more of a problem than the bro > bas example given by @jharding. I will not implement the code changes by @andy3rdworld even though they likely will work for me. I want things to be easily updateable, etc. Great library by the way.

[ghost]

Same issue here. Does anyone know how to make @andy3rdworld changes work in the most recent release? I'm somewhat knew to js.

[jharding]

FYI, this is something I want to fix. It's the next non-trivial issue I plan on looking addressing.

[Wbmstrmjb]

Forgive my lack of understanding about the internals, but it seems to me that the most recently fetched list from remote should act like the prefetched list. Each time a call is made, that new list is the new "prefetched" list and gets updated accordingly.

If I type "Mich" and ["Michael", "Michelle"] are in the list, I shouldn't need to wait for a new fetch when I type "a" to get "Michael".

[jharding]

When typeahead.js gets remote suggestions back, they don't get added to the local data (local + prefetch). This is done to avoid inconsistencies between the Bloodhound search algorithm and the search algorithm being used by the remote server.

[Wbmstrmjb]

I see. The reason why I am not the expert. :) I think we can solve our problem with a combo (load ~1000 recent ones and then have remote for "backup").

[jharding]

Assuming your hit rate on prefetched suggestions isn't horrible, that _should_ be a decent workaround. The dropdown will still become invisible after each keystroke, but unless you're using an older browser, the naked eye probably won't be able to notice.

[joekur]

The fix for this appears to have been lost in v 0.11. Can anyone confirm one way or the other?

[iMoses]

I'm experiencing the same issue and would like an option to fix it very much. It looks bad when the dropdown is flickering between each keystroke.

[joekur]

@iMoses check out my fork here if you're in need of a quick fix: https://github.com/reverbdotcom/typeahead.js/commit/79b4f088e713e7d5f5156f5b8054164b87fd89af

I was hoping to get an answer here and get another pull merged in (one of #1224, #1233, or #1212) before opening a pull for this.

[iMoses]

@joekur, Thanks! I was just starting to debug it, you saved me quite a lot of time :+1:

Please update the official code ASAP, it's the only true problematic behavior I came across of an otherwise excellent library which I really want to keep using :)

[jacksondc]

I'm having the same problem. Any hope for a fix?

[yashshah]

I'm facing the same problem. Anyone found the solution yet?

[Andy6792]

Same issue here.

[gaborbernat]

https://github.com/gaborbernat/typeahead.js/commit/6e8a91b05d7fa875101af09f26c71e9adf313a79

[ldaug]

Any update on this? I tried a few of the unofficial fixes (which did not help), but would like an official fixresponse, as this issue makes the control unusable in my opinion.

[joekur]

This project has apparently been abandoned. See https://github.com/corejavascript/typeahead.js where I believe many of these issues have already been resolved.

[ldaug]

Thanks. I was unaware.