How to filter a SELECT group using jquery

I want to filter the otions of a large select group based on text input in a textbox. Currently I am using the below jquery to filter from a SELECT group based on the text of a input box. Can you please tell me whether there is any more efficient way to do this? My Select group is very large with around 7000 entry, that's why I am looking for the most optimized way.

<script>
var fullcelllist = $(); var lastVal ="";$(window).load(function(){
$("#celllist option").each(function(){ fullcelllist.push($(this).val());
});
});

$("#filtercell").keyup(function() { if(lastVal.length <$(this).val().length){
$("#celllist option:not([value*='"+$(this).val().toUpperCase()+"'])").each(function() {
$(this).remove(); }); }else{ stregexp = new RegExp($(this).val(),"i");
temparr = $.grep(fullcelllist, function (value) { if(value.match(stregexp)) return value; return null; }); newopt = ""; temparr.sort();$.each(temparr,function(i){
newopt += "<option value='"+temparr[i]+"'>"+temparr[i]+"</option>";
});
$("#celllist").html("");$("#celllist").append(newopt);
}
lastVal = $(this).val(); }); </script> <input type="text" id="filtercell"> <select id ="celllist" multiple="multiple"> // HERE all OPTIONS using PHP <select>  - 2 Answers Your jQuery could be somewhat more efficient, if you save reused $(...) chunks in their own variables. Also, I think you will see some benefit to replacing some jQuery constructs with their pure JS alternatives ($.each -> for, etc..) <script> var fullcelllist =$(),
lastVal ="",
$celllistOption =$("#celllist option");

// ...

$("#filtercell").keyup(function() { var$this = $(this),$thisVal = $this.val(); // ...  - thanks .. i didn't know that reusing$(...) would hamper my performance! Good to know, I'll change accordingly. –  Abdullah Fahim Jan 12 '13 at 8:29

You can do something like this

var options = $("#celllist option"); // cache all your options right away$("#filtercell").keyup(function () {
var stregexp = new RegExp($(this).val(), "i"); // your regex$("#celllist").append(options); // append will add all missing options
var x = $.grep(options, function (value) { // get all the options where value doesn't match return !value.value.match(stregexp) });$(x).detach(); // detach them from dom
});


FIDDLE

-
wow .. I'll give that a try ... thanks –  Abdullah Fahim Jan 12 '13 at 8:30