HTML Combo Box with Option to Type an Entry

HTML combo box with option to type an entry

Before datalist (see note below), you would supply an additional input element for people to type in their own option.

<select name="example">
  <option value="A">A</option>
  <option value="B">B</option>
  <option value="-">Other</option>
</select>

<input type="text" name="other">

Combo box which has the option of to type an entry, in HTML

<?php $cars = array("Volvo", "BMW", "Toyota"); ?>

<script>
  function getOptions()
  {
      document.getElementById("sel1").style.visibility = "visible";
  }
  function addtext(a)
  {
     document.getElementById("txt1").value = a.innerHTML;
     document.getElementById("sel1").style.visibility = "hidden";
  }
</script>

<input type="text" name="txt1" id="txt1" onClick="getOptions()"><br/>
<select id="sel1" size="4" style="width:150px;visibility:hidden;" >
<?php 
   foreach($cars as $x => $x_value) 
   {
      echo "<option onClick='addtext(this)' value=".$x.">".$x_value."</option>";
   }
?>
</select>

plain html combo box code

Seems you are looking for datalist.

datalist is an html5 component. This same feature can be created using input box and ul, li elements

<label for="countries">Choose a Country:</label><input list="countryList" id="countries" name="countries" /><datalist id="countryList">  <option value="India">  <option value="France">  <option value="Isreal">  <option value="USA">  </datalist>

HTML select form with option to enter custom value

HTML5 has a built-in combo box. You create a text input and a datalist. Then you add a list attribute to the input, with a value of the id of the datalist.

Update: As of March 2019 all major browsers (now including Safari 12.1 and iOS Safari 12.3) support datalist to the level needed for this functionality. See caniuse for detailed browser support.

It looks like this:

<input type="text" list="cars" /><datalist id="cars">  <option>Volvo</option>  <option>Saab</option>  <option>Mercedes</option>  <option>Audi</option></datalist>

ComboBox to select only data in the list but submit their 3 digit code HTML5

I will recommend to use an autocomplete plugin (e.g. jQuery UI autocomplete) instead HTML5 datalist. However, if the question is regarding the datalist, you can populate the product code into hidden field:

<form>
    <input type="hidden" name="productCode" id="productCode" value="">
    <input type="text" name="product" id="product" list="productName" autocomplete="off">
    <datalist id="productName">
        <option data-code="ISB">Pen</option>
        <option data-code="KHI">Pencil</option>
        <option data-code="PWH">Paper</option>
    </datalist>
    <input type="submit">
</form>

<script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ=" crossorigin="anonymous"></script>
<script>
$(function() {
    // use "bind" instead "on" with jQuery lt 1.7
    $("#product").on("input", function(e) {
        var val = $(this).val();
        var listId = $(this).attr("list");
        var $option = $("#" + listId + " option").filter(function() {
            return ($(this).val() == val);
        });
        var code = ($.type($option.data("code")) != "undefined" ? $option.data("code") : "");
        $("#productCode").val(code);
    });
});
</script>

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

Here is a script for that:
Demo,
Source

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

How can i enable specific textboxes when a specific combo box option is chosen

<script>    function Select(val) {      var element=document.getElementById("options1");      var element2=document.getElementById("options2");      var element3=document.getElementById("options3");      if (val=="option 1")          element.style.display="block";       else           element.style.display="none";      if (val=="option 2")          element2.style.display="block";       else           element2.style.display="none";      if (val=="option 3")          element3.style.display="block";       else           element3.style.display="none"; 
      }    </script>


          <label class="formLabel">Options*</label><br />

    <select name="select2" required=""  onchange="Select(this.value);">    <option disabled="disabled" selected="selected" value=""></option>

         <option value="option 1">option 1</option>
    <option value="option 2">option 2</option>
    <option value="option 3">option 3</option></select><br />
    <div id="options1"  style="display:none;">
    <label class="classLabel">lesson 1* </label>    <label class="classLabel">lesson 2*</label>    <label class="classLabel" >lesson 3*</label><br />     <input class="formText" name="field7" required="" type="text"  />    <input class="formText" name="field8  required="" type="text"  />    <input class="formText" name="field9" required="" type="text"  /><br />    </div>     

    <div id="options2"   style="display:none;">
    <label class="classLabel" >lesson 4* </label>    <label class="classLabel">lesson 5*</label>    <label class="classLabel" >lesson 6*</label><br />     <input class="formText" name="field10" required="" type="text"  />    <input class="formText" name="field11" required="" type="text"  />    <input class="formText" name="field12" required="" type="text"  /><br />    </div>     

    <div id="options3"  style="display:none;">
    <label class="classLabel">lesson 7* </label>    <label class="classLabel">lesson 8*</label>    <label class="classLabel">lesson 9*</label><br />     <input class="formText" name="field13" required="" type="text"   />    <input class="formText" name="field14" required="" type="text"  />    <input class="formText" name="field15" required="" type="text"  /><br />    </div>     

    <input id="submitButton" type="submit" value="send" /></form>    </div>

HTML Combo Box with Option to Type an Entry