How to implement two advanced autocompletes for one search box? - javascript

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.

Related

Multiple Key Value Query Search Input Box

I'm not quite sure exactly what to search for or where exactly to start, but I'm trying to see if it's possible to have a customized search box for multiple GET queries simply using jQuery, JS, HTML and CSS.
The user would first type in something which will prompt the red box to show (key) and it would autofill with a listed default given the first few characters they typed. Then upon pressing enter or tab, they would be allowed to fill in the answer gray box (value). Then after, they can either choose to submit or put in another key / value.
Is there a jQuery library that already has this implemented, and is this even possible? I thought about putting input boxes inside the input search box and using jQuery to hide and show them depending on what they type, but is that the best way?
I'd like to do this without comprehensive framework / library like Angular and React.
Thanks in advance!
You must handle it with one of JavaScript freamworks like Vue.js, React.js or Angular.js

Use native search field as drop area

I'm looking for a way to add a drop handler to the native spotify search field. So when the user tries to add a track he can drop it not only in the area in my app but also in the native search field.
My app was rejected because it couldn't do that so it seems that this is possible. But I couldn't find a way on how to do it.
Does anybody know how the handler is added?
You mean the native search field as in the thing in the top left of the client, rather than a control you added to your own?
If so then no, you can't modify the behaviour of Spotify's own search field.

jQuery plugin for auto-completing AND dropdown functionality?

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!

Selectable textbox

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.

How to make a "hybrid" HTML drop-down list that can work as a text box as well?

For my website, I need to have a way for users to enter their cities.
I'd like to use 2 drop-down list for that: a "State" and a "City" drop-down lists. The choices in the "City" list would depend on what "State' has been selected.
However, there bound to be cases where a user's "City" is not in the drop-down list. To handle those cases, I want the "City" input to be a "hybrid": while users could select a choice from a drop-down list, they could also use the input as a textbox and simply type out their city name.
An example of what I have in mind is Google Map. Enter any address into Google Map. Then click on "Directions" on the left panel. Then click the "By public transit" icon (2nd icon from left). The right-most drop-down box is what I'm talking about. You could select choices like "1:00pm", "1:30pm", "2:00pm" etc from a drop-down list. But you could also just type out a time like "1:23pm" inside the box.
How do I do something like that? Is there any javascript library/framework that does that? I'm currently using jQuery.
There are lots of JavaScript examples of this, using JQuery, or native JS. They're typically called combo boxes - for their ability to select from the drop-down or accept typed entry - most of them including settings to enable free-form entry vs forcing selection from the list only. I don't have any experience with a specific type, so I won't make a recommendation, but if you Google "javascript combo box" that'll get you started in the right direction :)
If you view source on the GMaps directions page that you are referring to, you can see how they do it; the "dropdown" button is really just an image. When a selection is made from the dropdown, the value is put into the textbox.
Some solutions I've found for whom it may concern:
Using select2 library and Tagging .
Selectize is the hybrid of a textbox and box.
Using Vue frawework see vue-multiselect and tagging support.
So probably you can consider "select taggging support" a good combination of words to search at Google.

Categories