i have this list of cities(checkbox and label) and an input field:

<input class="search-filter" type="text"/>
<form autoplete="off" id="city-search-form" name="city-search-form" action="" method="">
   <div id="list" class="multiselect">
      <input id="city-id-1" class="css-checkbox" type="checkbox" />
      <label for="city-id-1" name="" class="css-label">abc</label>

      <input id="city-id-2" class="css-checkbox" type="checkbox" />
      <label for="city-id-2" name="" class="css-label">bce</label>

      <input id="city-id-3" class="css-checkbox" type="checkbox" />
      <label for="city-id-3" name="" class="css-label">cde</label>

      <input id="city-id-4" class="css-checkbox" type="checkbox" />
      <label for="city-id-4" name="" class="css-label">rgp</label>
   </div>
</form>

i am using this jquery code to filter the checkboxes + labels by the words i type in, but the code is not working. How can i filter and show only the labels that start with typed words.

function listFilter(list) {
    var input = $('.search-filter');

    $(input)
    .change( function () {

        var filter = input.val();

        $('.css-label').filter(function(filter) {

            if($('.css-label').text().search(filter) == 0){
                .....hide();
            }
            else {
              .......show();
            }
        });
      })
    .keyup(function () {
        input.change();
        .....
        } 

    });
  }
  $(function () {
    listFilter($("#list"));
  });
}($));

i have this list of cities(checkbox and label) and an input field:

<input class="search-filter" type="text"/>
<form autoplete="off" id="city-search-form" name="city-search-form" action="" method="">
   <div id="list" class="multiselect">
      <input id="city-id-1" class="css-checkbox" type="checkbox" />
      <label for="city-id-1" name="" class="css-label">abc</label>

      <input id="city-id-2" class="css-checkbox" type="checkbox" />
      <label for="city-id-2" name="" class="css-label">bce</label>

      <input id="city-id-3" class="css-checkbox" type="checkbox" />
      <label for="city-id-3" name="" class="css-label">cde</label>

      <input id="city-id-4" class="css-checkbox" type="checkbox" />
      <label for="city-id-4" name="" class="css-label">rgp</label>
   </div>
</form>

i am using this jquery code to filter the checkboxes + labels by the words i type in, but the code is not working. How can i filter and show only the labels that start with typed words.

function listFilter(list) {
    var input = $('.search-filter');

    $(input)
    .change( function () {

        var filter = input.val();

        $('.css-label').filter(function(filter) {

            if($('.css-label').text().search(filter) == 0){
                .....hide();
            }
            else {
              .......show();
            }
        });
      })
    .keyup(function () {
        input.change();
        .....
        } 

    });
  }
  $(function () {
    listFilter($("#list"));
  });
}($));

• javascript
• jquery
• html

• There are multiple errors in your code. For example, $.search() is not a function. $.filter() does not work the way you're trying to use it. It's unclear what it is you're trying to achieve. You have these city checkboxes. What are they supposed to do to the search filter field? You're not going to get a decent answer unless you can explain better what it is youre trying to do. – Ringo Commented Jul 30, 2013 at 6:04

4 Answers 4

Try

function listFilter(list, input) {
    var $lbs = list.find('.css-label');

    function filter(){
        var regex = new RegExp('\\b' + this.value);
        var $els = $lbs.filter(function(){
            return regex.test($(this).text());
        });
        $lbs.not($els).hide().prev().hide();
        $els.show().prev().show();
    };

    input.keyup(filter).change(filter)
}

jQuery(function($){
    listFilter($('#list'), $('.search-filter'))
})

Demo: Fiddle

You can use :contains() selector for filtering:

var input = $('.search-filter');
input.change( function () {
        var filter = input.val();
        if(filter.length == 0) { // show all if filter is empty
           $('.css-label').each(function() {
             $(this).show();   
             $(this).prev().show();
           });
           return;
        }

        // hide all labels with checkboxes
         $('.css-label').each(function() {
             $(this).hide();   
             $(this).prev().hide();
         }); 

        // show only matched
        $('.css-label:contains("'+filter+'")').each(function() {
            $(this).show();   
            $(this).prev().show();
        });
}).keyup(function() {
    $(this).change();    
});

jsfiddle

Too late to be accepted as correct but here is an attempt that I was working on before my job got in the way. Thought I may as well post it.

It is case insensitive and supports multiple words (thanks to Arun P Johny for that).

demo

$('.search-filter').keyup(function (e) {
    var text = $(this).val();
    var $elems = $('.css-label, .css-checkbox');

    if (text.length < 1) {
      $elems.show();
    }
    else{
        $elems.hide();    
        var sel = $('label').filter(function () {
           return $(this).text().match("\\b", "i" + text)
        }).attr('for');

        $('#'+sel + ',[for=' + sel + ']').show();                             
    }
});

i have a code below to get the label name

<!DOCTYPE html>
<html>
<head>

<SCRIPT src="//ajax.googleapis./ajax/libs/jquery/1.8.3/jquery.min.js">
</SCRIPT>

<SCRIPT>
$(document).ready(function(){

alert($(".css-label").text());
});
</SCRIPT>

</head>
<body>
<div id="list" class="multiselect">
      <input id="city-id-1" class="css-checkbox" type="checkbox" />
      <label for="city-id-1" name="" class="css-label">abc</label>
</div>
</body>
</html>

hope this will help you