Selectable textbox - javascript

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.

Related

Textarea with suggestions when user enters #

I'd like to know how to implement a textarea where a user can tag people by typing # and then write a person's name. You get inline suggestions for word matches.
I'm not even sure what the technical name would be for such a feature but it's a common in sites like Facebook.
You want an autocompleter of some sort.
Have a look at this jQuery autocomplete tagging plug-in like StackOverflow's input tags?
The solution for this is using jQuery Tokeninput.
Hopefully you are looking for some Twitter style autocomplete

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

Information Dialog Box when selecting input fields

I have searched, but cannot find the answer to this question. I think I just do not know the proper name for what I am trying to achieve.
Basically, I want to setup some input fields as if we are creating an account at a website. However, I would like a dialog box to pop up to the right of the input field when the user clicks inside of the input field. This dialog box pop up would provide further information of what exactly needs to go inside the input field to guide the user. I would like the dialog box to not be interactive so it does not get in the way.
I am sure there is some tutorial out there for this. However, I am guessing I just do not know the correct name for this function.
I think you mean a tooltip dialog type of functionality provided by Dojo. This link should provide you with some explanation and examples. The examples show on a button but can be easily done on input field also.
I am pretty sure this would be present in other technologies also like jQuery.

How to implement two advanced autocompletes for one search box?

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.

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!

Categories