Schadrack Rurangwa Schadrack Rurangwa - 4 months ago 8
HTML Question

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

A combo box which has the option of to type an entry works correctly in HTML, but the problem I have now is if you have too many data of to display no scroll bar found there means that there are many data which are displayed out of screen.

<input type="text" name="example" list="exList">
<datalist id="exList">
<option value="1">
<option value="2">
<option value="3">
<option value="4">
<option value="n">
</datalist>


Please anyone can help me.

Answer
<?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>
Comments