4
\$\begingroup\$

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>
\$\endgroup\$

2 Answers 2

3
\$\begingroup\$

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();

// ...
\$\endgroup\$
1
  • \$\begingroup\$ thanks .. i didn't know that reusing $(...) would hamper my performance! Good to know, I'll change accordingly. \$\endgroup\$
    – abdfahim
    Jan 12, 2013 at 8:29
1
\$\begingroup\$

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

\$\endgroup\$
0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.