Typeahead.js: Input value blank on blur

[flyingeek]

Go to the example demo page,

$('input[placeholder="countries"]').val('France').click().blur(); the input value is now blank.

If you set a value, you would like to keep it no ? (I would)

Same problem if the input contains a value before becoming a typeahead input.

[jharding]

Labeled this as a low-hanging fruit. It should be a very easy fix, basically all you have to do is change the following in the InputView constructor from:

this.query = '';

to:

this.query = this.$input.val();

If anyone out there wants to submit a pull request for this, go for it (be sure to include tests!). Otherwise I'll get to it when I can.

[jharding]

You're right – the fix I suggested would work if you set the value of the input before initializing the typeahead, which is only a part of the issue. The other part is dynamically setting the value after initialization. I think for that a plugin method will have to be added.

[orald]

I'll get to it if I can.

[orald]

@jharding This fixes the second part of the issue. When you call click() event - the value in box has already set so this solution will keep the value in the box otherwise use the one from query

_setInputValueToQuery: function() {
      this.inputView.setInputValue(this.inputView.$input.val() || this.inputView.getQuery());
},

[jharding]

@orald unfortunately that's not a complete solution, at least in my opinion. The reason I say that is because if you were to run:

$('.typeahead').val('new query');

I would expect suggestions to be rendered for new query, but with the patch you're proposing, that wouldn't happen.

Since there's not a great way of reliably and efficiently detecting programmatic changes to a value of an input (at least I'm not aware of anything), I think the only way we can really tackle this is by add a setQuery plugin method:

$('.typeahead').typeahead({ /* ... */ }).typeahead('setQuery', 'new query');

[orald]

@jharding Yes you are right. No easy way to detect changes to a value of input. As you suggested the following works as expected.

methods= { 
    ...
    setQuery: function(value){
        var $this = $(this), 
              view = $this.data('typeahead'),
              iv = view.inputView;
        iv.setInputValue(value);  
    }
}

I also added the dropdownhide function call on queryChange listener on("queryChange", this._hideDropdown) because when you call

$('.typeahead').typeahead('setQuery', 'new query');

twice or more. It renders on top of previous one.

[komprehend]

folks not sure if this is the right place to ask this question, how do you implement this? when/where do you call $('.typeahead').typeahead('setQuery', 'new query');?

[jharding]

The API has changed, you now would want to use $('.typeahead').typeahead('val', 'new query').

[bcackerman]

I'm curious how to implement this as well. When I autofill a typeahead enabled field, if a user clicks on that field, I don't want the value to disappear.

[bcackerman]

Figured it out: http://stackoverflow.com/questions/16974783/typeahead-js-on-blur-event

[huglester]

I don't really get how it should be working?
so I have something like that:

remote: {
            wildcard: '%QUERY',
            url: '/api/search?q=%QUERY',
}

Now, when I see the results. I can navigate threw them using up/down.
And when I press down (and I am leaving input field), I get that input emptied.
Any way to leave the input with a query?

Thank you

[HamsterofDeath]

can someone give a simple example of what do to to prevent the field from getting emptied by a blur event?
i found no clear answer. even the stackoverflow question has none

[huglester]

@HamsterofDeath not me ;(

[HamsterofDeath]

i found a working hack

var myTypeAhead = ...
myTypeAhead.unbind("blur") <- this gets rid of the original handler(s)
myTypeAhead.on("blur", function(evt) {$("#elementId").typeahead("close")}) // <- this will make sure the popup is still closed properly

[lorenzosanzari]

To avoid the blur field reset problem, I changed the plugin code (v. 0.11.1) at row 1487:
this.setInputValue(this.query);

to:

var val = (this.query && this.query.length > 0) ? this.query : this.getInputValue();
this.setInputValue(val);`

I hope this will help someone! :-)