The client needs to select a vendor from a drop down list (Select). The list is quite long, so it takes some time to load and scroll. It would be better if there was a way for the client to type in the first few letters of the name and press enter. This list would then filter only those vendor names starting with the typed value.

I am using a Select Tag for showing the drop down list. This, of course, is not supporting the requirement. Is there a way for select to act like what is required ? Like a drop-down combo instead of a drop-down list ?

I would prefer not to use any ActiveX controls as such, as some of the users have disabled ActiveX in their browsers and the page might fail.

Please feel free to modify this code to match your needs. If you have any question regarding this code you can document.write('Me on my inbox'). lol! Have a good day...

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Some Title</titles>
<style type="text/css">
<!--
body { 
        margin: 0 auto; 
        padding: 0; 
}

#main-div { 
       margin: 4px; 
       padding: 2px; 
       width: 300px; 
}

#form-div { 
       float: left; 
       width: 250px; 
       line-height: 30px; 
       margin: 2px; 
       padding: 2px; 
       background-color: #C0C0C0; 
}

#form-div form {
       background-color: #A6A6A6; 
       color: #000000; 
       margin: 2px; 
       padding: 4px; 
       text-align: left; 
       font-size: 12px; 
} 

#select-div { display: block; }

#input-div { 
       float: right; 
       margin: 2px; 
       padding: 2px; 
}

#input-div input[type=button] { 
       margin-left: 4px; 
       background-color:dimgrey; 
       color: #C0C0C0; 
}

#input-div input { 
       margin-top: 2px; 
       border: none; 
       background-color: #FFFFFF; 
       color: dimgrey; 
}

span.lister { 
       float: left; 
       margin-left: 6px; 
       padding: 0; 
       color: #888888; 
       font-weight: bold; 
} 

#pricing { 
       float: right;
       margin: 0; 
}

#pricing input { 
       background-color: #A6A6A6; 
       color: #C0C0C0; 
       border: none;  
       margin: 0; 
}
-->
</style>
<script type="text/javascript">
<!-- BEGIN HIDING
function makeSearch()
{ /* This example will demonstrate, on how to perform search with selection list and return the matched value! 
This will also select the item closest to the 1st 3 characters' of the typed value!
Just don't forget to add all the items you need, in your selection list!
Hope you had fun! Good day...     */
      
  var _Option = parseInt( -1 );
 for ( var x = 0; x < document.form1.vendor.options.length; x++ ) 
{ _Option = x; 
  break;
  }

  var myItems = '';
  var searchValue = '';
  var itemList = '';
  itemList = eval( 'document.form1.vendor.options.length' );
  searchValue = document.form1.text1.value;
  if ( searchValue ) 
{ searchValue =  searchValue.substr(0, 3).toLowerCase(); 
  for ( var i = 0; i < itemList; i++ ) 
{ myItems = eval( 'document.form1.vendor.options[' + i + '].text.substr(0, 3).toLowerCase()'); 
  if ( myItems.indexOf( searchValue ) >= 0 ) 
{ document.form1.vendor.options[i].selected = true ;
  break;
       }
    }
  } return false;
}

function showValue()
{ 
document.form1.price.value = document.form1.vendor.options[form1.vendor.selectedIndex].value;
}
// DONE HIDING -->
</script>
</head>
<body>
<div id="main-div">
<div id="form-div">
<form name="form1" action="#" onSubmit="return false;">
<div id="select-div">
<select name="vendor" onFocus="makeSearch();showValue();">
<option>product List</option>
<option value="Price &#36;0.70 for 6pcs.">Green Apple</option>
<option value="Price &#36;1.00 for 6pcs.">Juicy Apple</option>
<option value="Extra">Additional Item</option>
<option value="Price &#36;0.60 per 500grms.">Big Banana</option>
<option value="Price &#36;0.40 per 500grms.">Small Banana</option>
<option value="Another Selection">Have Fun!</option>
</select>
<div id="pricing"><input name="price" type="text" size="19" readonly /></div>
</div>
<span class="lister">PRODUCTS</span>
<div id="input-div">
<nobr><input name="text1" type="text" size="18" value="" />
<input name="button" type="button" value="Find" onclick="makeSearch();showValue();" /></nobr>
</div>
</form>
</div>
</div>
</body>
</html>
This article has been dead for over six months. Start a new discussion instead.