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

Selecting id's, displaying values #193

Closed
hannesfostie opened this Issue Apr 12, 2013 · 18 comments

Comments

@hannesfostie

hannesfostie commented Apr 12, 2013

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

This comment has been minimized.

Show comment
Hide comment
@senthilsivanath

senthilsivanath Apr 12, 2013

@hannesfostie
Change the valueKey, while setting up typeahead.

valueKey:"YourValueField"

senthilsivanath commented Apr 12, 2013

@hannesfostie
Change the valueKey, while setting up typeahead.

valueKey:"YourValueField"

@hannesfostie

This comment has been minimized.

Show comment
Hide comment
@hannesfostie

hannesfostie Apr 12, 2013

@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!

hannesfostie commented Apr 12, 2013

@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

This comment has been minimized.

Show comment
Hide comment
@steswinbank

steswinbank Apr 12, 2013

Contributor

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;
})

Contributor

steswinbank commented Apr 12, 2013

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

This comment has been minimized.

Show comment
Hide comment
@hannesfostie

hannesfostie Apr 12, 2013

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

hannesfostie commented Apr 12, 2013

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

@senthilsivanath

This comment has been minimized.

Show comment
Hide comment
@senthilsivanath

senthilsivanath Apr 12, 2013

@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

senthilsivanath commented Apr 12, 2013

@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

This comment has been minimized.

Show comment
Hide comment
@johanpoirier

johanpoirier May 2, 2013

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 ?

johanpoirier commented May 2, 2013

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

This comment has been minimized.

Show comment
Hide comment
@jharding

jharding May 2, 2013

Contributor

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

Contributor

jharding commented May 2, 2013

@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

This comment has been minimized.

Show comment
Hide comment
@johanpoirier

johanpoirier May 2, 2013

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

johanpoirier commented May 2, 2013

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

@hannesfostie

This comment has been minimized.

Show comment
Hide comment
@hannesfostie

hannesfostie May 3, 2013

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.

hannesfostie commented May 3, 2013

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

This comment has been minimized.

Show comment
Hide comment
@augnustin

augnustin Jul 10, 2013

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.

augnustin commented Jul 10, 2013

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

This comment has been minimized.

Show comment
Hide comment
@Thinkscape

Thinkscape Nov 19, 2013

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

Thinkscape commented Nov 19, 2013

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

This comment has been minimized.

Show comment
Hide comment
@sam-huckaby

sam-huckaby Feb 12, 2014

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

sam-huckaby commented Feb 12, 2014

@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

This comment has been minimized.

Show comment
Hide comment
@Xeoncross

Xeoncross Feb 17, 2014

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

Xeoncross commented Feb 17, 2014

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

@GretaCB

This comment has been minimized.

Show comment
Hide comment
@GretaCB

GretaCB Mar 20, 2014

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!

GretaCB commented Mar 20, 2014

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

This comment has been minimized.

Show comment
Hide comment
@Erwane

Erwane Dec 15, 2015

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

Typing : erw
Display : Erwane Breton (erwane@phea.fr) (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 ?

Erwane commented Dec 15, 2015

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

Typing : erw
Display : Erwane Breton (erwane@phea.fr) (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

This comment has been minimized.

Show comment
Hide comment
@noglance

noglance Jan 5, 2016

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.

noglance commented Jan 5, 2016

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

This comment has been minimized.

Show comment
Hide comment
@cromulus

cromulus May 13, 2016

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

cromulus commented May 13, 2016

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 comment has been minimized.

Show comment
Hide comment
@vandux

vandux Aug 30, 2016

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

vandux commented Aug 30, 2016

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment