Member Avatar for aparnesh

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.

  • 2 Contributors
  • 2 Replies
  • 119 Views
  • 2 Days Discussion Span
  • Latest Post Latest Post by aparnesh
Member Avatar for essential

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>
Member Avatar for aparnesh

Thanks essential. I will try it and let you know

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.