Typeahead.js: Selecting id's, displaying values

[hannesfostie]

I've just implemented typeahead to serve as a kind of autocomplete select tag, fetching the names, companies and emails of a bunch of users. However upon selecting one of them, it sets the value of the text field to the id of the object in question, while I want to display the name.

In other words, I'd like to mimic something like <option value="1">John Doe</option> where I would submit the 1 value while never having to display it. And I prefer not having to do an additional query to find a person based on their name (which may not even be unique all the time).

I hope that makes sense.
Hannes

[senthilsivanath]

@hannesfostie
Change the valueKey, while setting up typeahead.

valueKey:"YourValueField"

[hannesfostie]

@senthilsivanath so my datum has a value (currently the id), and a name field. I've tried a couple variations, but I can never get to the point where the form submits the id of the selected datum, while displaying the name field in the textfield.

As far as I can tell, the valueKey setting only changes the name of the field for you, while not altering the behaviour of which value is displayed or submitted?

EDIT: Currently, unless I'm missing something, the valueKey is always the one being displayed as well as submitted. I want to change one of those to a different field. I hope that clears it up!

[steswinbank]

You can use the custom events 'typeahead:selected' and 'typeahead:autocompleted' to populate a hidden input within the form. These custom events contain the datum selected as an argument. You'll want something like: $(#TypeAheadInput").on("typeahead:selected typeahead:autocompleted", function(e,datum) {
$(hiddenInput).val() = datum.id;
})

[hannesfostie]

@steswinbank that works like a charm! Much appreciated. Should this not become a default 'feature' without having to go through these hoops?

[senthilsivanath]

@hannesfostie
Yes i expected a default feature, but this step is completely optional.

But i felt the purpose was to make a better textbox and not a better select box. If you need a better select box, go for chosen select box

[johanpoirier]

I have the same issue than @hannesfostie but the solution provided by @steswinbank can't be applied to my case.
I display a list of cities and their zip code (eg : Lyon (69000) ) and if I set the city name as the valueKey, the cities with the same name (but different zip codes) are not all suggested to the user. So I can't use the name as the valueKey. And if I use some unique ID, typeahead fills the search input with this ID which is not what I want.

I can't think of an elegant solution here, do you ?

[jharding]

@johanpoirier assuming you are using remote data, it sounds like how typeahead.js handles deduping data may be your issue. Deleting these lines may do the trick for you. It's not elegant, but as mentioned above, this is a use case typeahead.js isn't necessarily meant for.

[johanpoirier]

Thanks a lot for your answer @jharding, I now have two solutions, one remote side and one client side.

[hannesfostie]

For what it's worth, @senthilsivanath, I think this is actually still a better select box simply because of the fact that is pretty lightweight and allows me to control markup and style a lot better than chosen (or select2) does. Setting a hidden input field with the value I require (an id) does the trick. I think a simple implementation of this would open up the project to be used in a lot of additional ways.

[augnustin]

Yes yes yes, would be very nice (and logical) as a default feature. I agree it is quite an hybrid between select box and input field since the user is still typing, but the commited value is different from the displayed value.

[Thinkscape]

Just stumbled upon the same bug.

1. It is not possible to implement _display field_ using listeners, because there's many internal method that will still override the field (i.e. pressing down key, or "blured" custom event) multiple times and they cannot be overriden.
2. It is also not possible to use listeners to inject the proper value after the selection, because typeahead implicitly dedupes the dataset, removing items with same _display fields_ but different value fields (i.e. _identifiers_).

[sam-huckaby]

@senthilsivanath Yes, this project is to build a better textbox, which is most commonly used when a select box would be too long, or require too many substeps.

[Xeoncross]

+1 I would like to see the value auto-inserted into the given text input (or another hidden element).

[GretaCB]

Was this change implemented already? I'm trying to do the opposite actually. I dont want the selected value to be auto-inserted. I am using the twitter tagsinput library to display the selected value. So after selection from the typeahead list, I am getting a tag with the selcted value and I'm also getting the value string displayed in the input box. Any way I can set auto-inserting the value to false? Thanks!

[Erwane]

Sorry but i found no way to do somethng like that ...

Typing : erw
Display : Erwane Breton ([email protected]) (the title key in json return)
onSelect : fill the input with "Erwane Breton" (the name key in json return)

the :select event is fired BUT the this.close() call this.input.resetInputValue() after and change the field value.

Any ideas ?

[noglance]

Looks like very old and popular issue. Is there any working solutions? There is several options: displayKey, valueKey; and it would be very useful to set independent values with this keys for key(id) and object value (something human readable) because sending form with object but not with key of this object sometimes impossible. For example you have list of cities and some of them have similar names. With the help of templates you can redefine output to make it clear. How to get id of selected object? May be I'm missing something but it is still not working form me.

[cromulus]

agreed. I'd really like to be able to specify what values are submitted in the typeahead for independent of the values displayed...

[vandux]

👍 this would be the perfect solution for "I need a select box, but there are 1000s of possible values", however this very simple feature is missing.