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

Question

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.

Answer 1

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.

Answer 2

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