Client-side searching in checkbox value

Question

I need help.. for now I'm trying to create a client search but I don't know how to compare values from input text to checkboxes.

jsFiddle Example

Example:

jQuery("#searchBox").on("keyup paste", function() {
    var value = jQuery(this).val().toUpperCase();
    var rows = jQuery(".sp_country");
        rows.hide();
        if(value === '') {
            rows.show();
            return false;
        } 
   //need something here to compare values on checkboxes and show does checkedbox who match
});

Here is my check box located

<span class="sp_country">
    <input class="cp_country" style="cursor:pointer; display:none;" type="checkbox" name="country" value="Afghanistan">&nbsp;Afghanistan    
</span>

Answer 1

You can use .filter() method:

rows.filter(function() {
   return $(this).text().toUpperCase().indexOf(value) > -1;
}).show();

Or in case that you want to compare the input with value of checkboxes:

rows.filter(function(){
   return this.children[0].value.toUpperCase().indexOf(value) > -1;
}).show();

You can can also use the jQuery's .find() method for selecting the input descendants.

Answer 2

Try this

$("cp_country").each(function(){
    if($(this).val()==("#searchBox").val()){
        $(this).parent(".sp_country").show();
    }
});

Whole idea is:

 iterate through each of the checkbox value
 if the value matches with search box value then
   show the parent span element

Answer 3

Try this:

$("#searchBox").on("keyup paste", function() {
    var value = $(this).val().toUpperCase();
    var rows = $(".cp_country");
        rows.hide();
        if(value === '') {
            rows.show();
            return false;
        }
        else{
            rows.each(function(){
               if($(this).val().toUpperCase().indexOf(value) != -1){
                  $(this).show();
               }
               else{ $(this).hide();}
            });

        }
});