I have a list of countries in a database. To allow users to select their country, I would like to implement a form that supports auto-complete / autofill AND "normal dropdown behavior" within one control. By auto-complete / autofill I mean that the user starts typing their country name and then a list of suggestions appears automatically based on what they entered for them to quickly select from - just like how the tags input box on this page works.
Examples can be seen on http://www.momondo.com/ and http://badoo.com/ but I think their script is custom.
Is there an opensource .js plugin for this that's cross-browser friendly?
Thanks.
JQueryUI Autocomplete plugin is what you need http://jqueryui.com/demos/autocomplete/
You can find a lot of demos and documentation in the previous link. I hope it helps you!
Related
I need help and tips on how to implement this feature.
I have a search box. A correct search query could be: Cars in Paris. {category} in {location}.
When the user starts to type the first char a search hint appears for the categories.
The user selects "Car parts" from the hint options.
"[space-key]in[space-key]" are added to the searchbox automatically after the selection of an option.
A new search hint appears for the locations. User chooses Paris.
Do the search after selection the location.
Any tips on how to implement this?
Here's what I'd suggest:
Use jquery UI for auto suggest (very easy to implement, easy to customize to work for your specific situation) http://jqueryui.com/demos/autocomplete/. What I'd suggest is to have jQuery check whether the user is typing in a category or location (by seeing if the input is empty) and based on that, run a different autocomplete call.
jQuery UI has an event called 'select'. Use that to add the chosen item + in into the text field.
Now, when the user types in something else, have jQuery recognize that it's time for a location, and call jQuery UI autocompletion to suggest locations.
There is a Twitter Bootstrap form library that I am not able to find, but I viewed it before.
It allowed detailed markup and tooltip type functionality for drop downs.
All the data in the drop downs were country names. So if this rings a bell, please let me know the name of the library!
Maybe what you are looking for is Chosen? Give a look at harvesthq page on github.
Maybe it was Select2:
Select2 is a jQuery based replacement for select boxes. It supports
searching, remote data sets, and infinite scrolling of results. Look
and feel of Select2 is based on the excellent Chosen library.
http://ivaynberg.github.com/select2/
I am looking for a jQuery plugin that behaves like the Google+ autocomplete + dropdown. In G+, I can enter a person's name and it'll look in my circles and show me a list of matches, or I can click the dropdown arrow at the end of the input box to get a list of all possible names that I can select from. I was able to find plugins that do the autocomplete, but nothing that mixes that with a dropdown functionality to show you all possible names. Any ideas?
You can also try the chosen component.
http://harvesthq.github.com/chosen/
It's a very nice piece of UI
Try jQueryUI Autocomplete: http://jqueryui.com/demos/autocomplete/
I have a page where you can choose from one of 350 people.
There is limited space to make this selection so there is a select menu with 350 options in it, each with a person's name.
When the page is submitted, the id (selected ption value=X) is submitted and recorded.
It works functionally but it's not ideal having to scroll such a long list.
Does anyone know of a jQuery plugin, or similar I can use, perhaps some sort of autocomplete type thing which would do the job in a more user-friendly and sexy way? :)
you can try jquery autocomplete combobox.
see demo here. http://jqueryui.com/demos/autocomplete/#combobox
jQuery UI has a built-in plugin called Autocomplete, which sounds like precisely what you're looking for: http://jqueryui.com/demos/autocomplete/
I have a use case for a textbox but that has some default options e.g. if a user was asked to type their address but it would also be a select box so they could select their home address or work address.
Is there something out there like this? I have been googling but i cant see anything similar but i could be googling the wrong thing entirely.
Thanks
Have you looked at the jquery autocomplete plugin?
It has the functionality you are looking for plus the ability to automatically filter the user's options based on what the user is typing.