4

I need to do the following thing: Using JavaScript, the HTML input tag having the text type and a select tag (combo box), create an editable combo box.

I have no idea how to make a combo box editable. Can you give me some suggestions, please?

I create the combo box like this, but is obviously not editable:

<html>
    <label>Your preferred programming language: </label>
    <select id="combobox">
        <option value="">Select one...</option>
        <option value="ActionScript">ActionScript</option>
        <option value="AppleScript">AppleScript</option>
    </select>
</html>

Where should I use the input tag?

1
  • It's good practice to accept an answer or ask for futher assistance if none of the answers are suitable :)
    – deiga
    Commented Nov 9, 2017 at 11:36

3 Answers 3

10

HTML5 includes the datalist element which solves this problem! :)

<html>
    <label>Your preferred programming language: </label>
    <input type="text" list="combo-options" id="combobox">
    <datalist id="combo-options">
        <option value="ActionScript">ActionScript</option>
        <option value="AppleScript">AppleScript</option>
    </datalist>
</html>

1

Try something like this:

<label>Your preferred programming language: </label>
<input type="text" id="new_value"/>
<select id="combobox">
    <option value="">Select one...</option>
    <option value="ActionScript">ActionScript</option>
    <option value="AppleScript">AppleScript</option>
</select>



$("#new_value").keyup(function (e) {
    if (e.keyCode == 13) { // enter key
        var value = $(e.currentTarget).val();   // store the value from the input tag
        var option = $("<option/>");            // create a new option tag
        option.val(value).text(value);          // set the value attribute as well as the content
        $("#combobox").append(option);          // insert the new object to the dom
    }
});
0

<html>
    <label>Your preferred programming language: </label>
    <input type="text" list="combo-options" id="combobox">
    <datalist id="combo-options">
        <option value="1">ActionScript</option>
        <option value="2">AppleScript</option>
    </datalist>
</html>

1
  • this code looks very similar to the other code posted. Can you add an explanation to the answer why this variation is better? In general, code without descripton is not the most helpful way to answer.
    – ruud
    Commented Jul 31 at 8:27

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.