Making an editable options box in HTML (Possible Javascript)

Question

I want to create a drop down menu (like an <options> tag) in an HTML form. The issue is that I also want the user to be able to not only select from a list of options, but also type in their own if they want. So it would almost be like there was a text field that was automatically filled when you selected something from the drop down box, but you could still edit it.

This is the sort of thing I mean, only its a desktop app on windows (notice how the text can be edited):

I'm pretty flexible about exactly how it looks. If there is another, easy to implement, solution where the user can easy scroll/see a list of options or add in their own that doesn't look like what I described, I'm open to the idea.

Answer 1

Most of the drop down auto type scripts out there will let you type into the input box text that doesn't have to match one of the options in the options list. Just when you go to submit the form be sure to check to see if there is a selectedValue in the drop down and if not grab the drop down's text instead. How to do this will vary on what script you are using. As to what type ahead drop down script to use there are plenty out there, here is an ancient one that works pretty well but there are lot's of others.

http://trappedinhoth.blogspot.com/2008/07/jquery-autocomplete-example.html

HTML 5 even supports an autocomplete drop down

http://trappedinhoth.blogspot.com/2013/03/html-5-datalist-key-value-work-around.html

I hope that points you in the right direction.