Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How can I create an editable combo box in HTML/Javascript?

I need to let users select an item from a dropdown list, but also allow them to instead enter any text, even if it doesn't match an item in the list. How can I achieve this on a web page with HTML and Javascript?

The select field doesn't let users enter text, and the input text field doesn't show the preferred alternatives.

All items must show if the user opens the dropdown, so it can't be a simple auto-complete that only shows matching items.

like image 207
Christian Davén Avatar asked Jun 16 '10 09:06

Christian Davén


People also ask

How do I make a combobox editable?

In this article we will see how we can make a combo box such that user and change the value of it by typing. By default when we create a combo box we can only choose from the option in the drop down menu although in editable combo box we can set the text by our self.

How do you code a combo box in HTML?

Introduction to Combobox in HTMLIt is formed with select element and input type=”text” element. The functionality of the Combobox is as same as a select tag. It's also having a <option>tag attribute within the <select >tag to select the menu option from the list so one can choose an option as per their choice.

How do I make an editable dropdown in HTML?

You can accomplish this by using the <datalist> tag in HTML5. If you double click on the input text in the browser a list with the defined option will appear.

What is combo box in JavaScript?

The ComboBox control combines an input element with a drop-down list. You can use it to select and/or edit strings or objects from lists. The ComboBoxes below allow you to select from lists of strings and objects.


1 Answers

Here is a script for that: Demo, Source

Or another one which works slightly differently: link removed (site no longer exists)

like image 56
Tom Gullen Avatar answered Oct 04 '22 10:10

Tom Gullen