<html>
<head>
<script type="text/javascript" src="jquery-1.2.6.js"></script>
<script type="text/javascript" >
$.fn.search = function(searchElements) {
$(this).keyup(function(){
var searchString = $(this).val();
if (searchString.length > 0){
$(searchElements).hide();
$(searchElements+':contains(' +searchString+ ')').show();
}
else {
$(searchElements).show();
}
});
};
$(document).ready(function(){
$('#suneel').search('select[name="selectedProductGroupId"] > option');
});
</script>
<body>
<TABLE BORDER="0" CELLSPACING="0" CELLPADDING="0" ALIGN="LEFT" VALIGN="TOP">
<TR>
<td>
<input type='text' id='suneel'/>
</td>
<TD>
<select name="selectedProductGroupId" size="20" style="width:300">
<option value="3213">01-0026 COOKSET</option>
<option value="4001">01-0064 BOWL ALTAIRs</option>
<option value="3496">01-0501 COOKIE JAR PINOCCHIO</option>
<option value="3821">01-1040-AA BAKING SET RED</option>
<option value="3822">01-1040-AB BAKING SET BLUE</option>
<option value="3270">04-0179 VASE</option>
<option value="4043">06-0330 Waterman Hemisphere & Swiss Ar</option>
<option value="4044">06-0331 Compu-backpack & Ion Pen</option>
<option value="4045">06-1676 Matrix Pen Set</option>
<option value="3482">08-0001 WET/DRY VACUUM</option>
<option value="3483">08-1408 IRON </option>
<option value="4041">11-0055 IMMERSION BLENDER WHITE</option>
<option value="4042">11-0055-AA IMMERSION BLENDER BLACK</option>
<option value="4046">11-0062 GRILL</option>
<option value="2830">11-0534 COFFEE MAKER</option>
<option value="4047">11-1301-AB HAND MIXER WHITE</option>
<option value="4048">11-1301-AC HAND MIXER BLACK </option>
<option value="4049">11-1301-AD HAND MIXER BLUE </option>
<option value="2101">11-1740 COFFEE MAKER </option>
<option value="3203">11-1748 DEEP FRYER </option>
<option value="189">22-5125 VOLLEYBALL SET</option>
<option value="2113">23-1611 WHEELED COOLER </option>
<option value="592">24-1091 PUTTER</option>
<option value="579">24-1131 RACQUETBALL SET</option>
<option value="673">24-1158 SUNGLASSES</option>
<option value="4050">24-1221 GOLF BAG</option>
<option value="2730">24-1241 LADIES GOLF SHOES</option>
<option value="3254">24-1280 GOLF SHOES MENS</option>
<option value="59">25-1004 LANTERN</option>
<option value="4051">25-1054 TENT 2 PERSON</option>
<option value="567">26-1101 KIDS INLINE SKATES</option>
<option value="698">26-1145 ABDOMINAL EXERCISER</option>
<option value="467">26-7293 HELMET</option>
<option value="24">28-1412 BARBECUE TOOLS</option>
<option value="141">28-3053 CHARCOAL GRILL</option>
<option value="558">35-0901 PILLOW </option>
<option value="3415">38-5584 TV 1.8&#34;</option>
<option value="3453">39-2123 HEADPHONES</option>
<option value="4052">40-0077 RADIO </option>
<option value="547">40-0407 PERSONAL CD PLAYER</option>
<option value="699">40-0425 2 WAY RADIO</option>
<option value="3484">40-0481-AA RADIO</option>
<option value="4053">40-0487 RADAR/LASER DETECTOR</option>
<option value="2476">40-0503 LASER/RADAR DETECTOR</option>
<option value="3485">42-0077 PLAQUE REMOVER</option>
<option value="316">42-4572 THERMOMETER</option>
<option value="226">43-4012 BINOCULARS</option>
<option value="4054">43-4094 CAMERA OUTFIT</option>
<option value="3475">43-4118 BINOCULARS</option>
<option value="481">46-0112 CORDLESS PHONE</option>
<option value="3486">46-4063 LABEL PRINTER</option>
<option value="4055">46-4131 SAFE</option>
<option value="4056">50-4537 NECKLACE CZ</option>
<option value="104">51-0091 WATCH</option>
<option value="3487">51-0208 MENS WATCH</option>
<option value="3029">51-3084 WATCH MENS</option>
<option value="3446">51-4000 WATCH WOMENS</option>
<option value="3411">51-4005 WATCH CAMERA</option>
<option value="676">53-1032 SUNGLASSES</option>
<option value="236">53-1058 LUGGAGE SET</option>
<option value="2213">53-3035 COMPUTER BACKPACK</option>
<option value="3151">53-3510 UTILITY TOOL</option>
<option value="1001">53-4063 DUFFEL BAG</option>
<option value="3315">53-4702 HANDBAG</option>
<option value="4057">53-4714 PULLMAN</option>
<option value="3488">57-0003 EARRINGS </option>
<option value="2435">57-3021 REVERSIBLE EARRINGS</option>
<option value="4058">60-0111 LAMP 29"</option>
<option value="3621">63-0118 ATLANTIC WINE CART</option>
<option value="3402">65-0005 CHAIR</option>
<option value="670">71-1033 STROLLER</option>
<option value="3493">71-1095 STROLLER </option>
<option value="681">71-1110 TABLE AND CHAIRS</option>
<option value="307">71-1115 TAPE RECORDER</option>
<option value="3494">71-1201 CRIB</option>
<option value="3495">71-8137 BABY MONITOR </option>
<option value="290">71-8151 TRIKE</option>
<option value="432">71-8161 EASEL</option>
<option value="143">75-1372 CIRCULAR SAW</option>
<option value="333">75-5094 PROJECT CENTER</option>
<option value="633">75-7228 BATTERY CHARGER</option>
<option value="231">77-1130 LIGHT SET</option>
</select>
</TD>
</tr>
</table>
</body>
Note that the above code will not work with IE because IE doesn't support hiding of select options. I had to find a work around. Here it is:
$.fn.search = function( origOptions ,selectElement) {
$(this).keyup(function(){
var searchString = $(this).val();
selectElement.empty();
if (searchString.length > 0){
for(i=0;i<origOptions.length;i++) {
if((origOptions[i].text.indexOf(searchString)>-1)){
selectElement.append(origOptions[i]);
}
}
}
else {
selectElement.append(origOptions);
}
});
};
$(document).ready(function(){
var opts=$('select[name="selectedProductGroupId"] > option').get();
var slct=$('select[name="selectedProductGroupId"]');
$('#prodFilter').search(opts,slct);
});