CODEWITHSUNDEEP
phphtmlcombobox
Schadrack Rurangwa
Schadrack Rurangwa

Reputation: 401

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.

Upvotes: 1

Views: 876

Answers (2)

Riddhi Rathod
Riddhi Rathod

Reputation: 406

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

Upvotes: 0

Riddhi Rathod
Riddhi Rathod

Reputation: 406

It is not possible to add scrollbar to DataList because it does not support any css properties, so one way is that you can use dropdownlist, <select> <option/> </select>. Scrollbar automatically added to dropdownlist..

Upvotes: 1

Related Questions