Filtering a SELECT group using jQuery

Question

I want to filter the options of a large select group based on text input in a textbox. I am currently using this code to filter from a SELECT group based on the text of a input box.

Can you please tell me whether there is a more efficient way of doing this? My SELECT group is very large with around 7000 entries, which is 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>

Answer 1

Your jQuery could be somewhat more efficient if you minimize $(...) element look-ups by storing them as variables or chaining them.

Also, I think you will see some benefit to replacing some jQuery constructs with their pure JS alternatives ($.each -> for, etc..)

Check out this set of jsPerf tests from this StackOverflow answer.

<script>
var fullcelllist = $(),
 lastVal ="",
 $celllistOption = $("#celllist option");
// ...
$("#filtercell").keyup(function() {
 var $this = $(this),
 $thisVal = $this.val();
// ...

• abdfahim: thanks .. i didn't know that reusing $(...) would hamper my performance! Good to know, I'll change accordingly.

Answer 2

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