Make search input to filter through list Jquery

Hey, I am trying to create a search field that will filter or show/hide(which ever is best) the list elements based on what the user typed in and clicked the search button. I have no idea how to do this. everything I tried does not work unfortunately and im unsure of the best approach for this, like do i use show and hide or is there something better?

This is my HTML:

<html>
    <head>

    </head>
    <body>
    <label for="filter">Filter</label>  
    <input type="text" name="filter" value="" id="filter" />

        <a id="addtag" href="#">Search</a> 

    <ul>
        <li id="Hero1">Superman</li>
        <li id="Hero2">Batman</li>
        <li id="Hero3">Spiderman</li>
        <li id="Hero4">Iron Man</li>
        <li id="Hero5">The Hulk</li>
    </ul>

    </body>
</html>

So, if someone types in 'Superman' and clicks the search button, then only the Superman list element will be displayed.

Any help on this would be great. Thanks.

This uses jQuery and creates a sliding animation, too. This would be the HTML:

<div id="wrap">
  <h1 id="header">List of countries</h1>
  <ul id="list">
    <li><a href="#">List Item</a></li>
            <li><a href="#">Add Unlimited Items</a></li>
</ul>
</div>

JavaScript

(function ($) {
  // custom css expression for a case-insensitive contains()
  jQuery.expr[':'].Contains = function(a,i,m){
      return (a.textContent || a.innerText || "").toUpperCase().indexOf(m[3].toUpperCase())>=0;
  };


  function listFilter(header, list) { // header is any element, list is an unordered list
    // create and add the filter form to the header
    var form = $("<form>").attr({"class":"filterform","action":"#"}),
        input = $("<input>").attr({"class":"filterinput","type":"text"});
    $(form).append(input).appendTo(header);

    $(input)
      .change( function () {
        var filter = $(this).val();
        if(filter) {
          // this finds all links in a list that contain the input,
          // and hide the ones not containing the input while showing the ones that do
          $(list).find("a:not(:Contains(" + filter + "))").parent().slideUp();
          $(list).find("a:Contains(" + filter + ")").parent().slideDown();
        } else {
      $(list).find("li").slideDown();
        }
        return false;
      })
    .keyup( function () {
        // fire the above change event after every letter
        $(this).change();
    });
  }


  //ondomready
  $(function () {
    listFilter($("#header"), $("#list"));
  });
}(jQuery));

CSS is optional. JSFiddle Demo: http://jsfiddle.net/4feug/

You might be better off using a jQuery Search Plugin, like this one.

Very basic version, but no need of plugins and it works:

$("#addtag").click(function(){
  $("ul li").hide()
  .filter(":contains('"+ $("#filter").val() +"')").show()
  return false;
})

A little improvement to duckyflip's answer to make the search case-insensitive:

$.expr[":"].contains = $.expr.createPseudo(function(arg) {
    return function( elem ) {
        return $(elem).text().toUpperCase().indexOf(arg.toUpperCase()) >= 0;
    };
});

$("#addtag").click(function(){
    $("ul li").hide()
    .filter(":contains('"+ $("#filter").val() +"')").show()
    return false;
});

来源：https://stackoverflow.com/questions/1766299/make-search-input-to-filter-through-list-jquery

标签

jquery

input

filter

hide

show