Сделайте поисковый ввод для фильтрации по списку Jquery

Эй, я пытаюсь создать поле поиска, которое будет фильтровать или показывать/скрывать (что лучше всего) элементы списка на основе того, что пользователь ввел и нажал кнопку поиска. Я понятия не имею, как это сделать. все, что я пробовал, к сожалению, не работает, и я не уверен в лучшем подходе для этого, например, я использую показать и скрыть или есть что-то лучше?

Это мой 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>

Таким образом, если кто-то введет «Супермен» и нажмет кнопку поиска, будет отображаться только элемент списка Супермен.

Любая помощь в этом была бы отличной. Спасибо.


input hide filter jquery show
person Spyderfusion02    schedule 19.11.2009    source источник

Ответы (4)


arrow_upward
4
arrow_downward

Это использует jQuery и также создает скользящую анимацию. Это будет 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 является необязательным. Демонстрация JSFiddle: http://jsfiddle.net/4feug/

person DaKoder    schedule 03.02.2013

arrow_upward
3
arrow_downward

Возможно, вам лучше использовать подключаемый модуль поиска jQuery, подобный этому.

person Robert Harvey    schedule 19.11.2009
comment
Мне не нравится метод keyup. Я хочу нажать кнопку поиска, и результаты будут отображаться на основе всей введенной строки. - person Spyderfusion02; 19.11.2009
comment
Просто подключите метод нажатия кнопки в коде плагина вместо метода keyup в текстовом поле поиска. Тем не менее, пользователям очень нравится такое сворачиваемое поведение, и оно работает для сотен строк. - person Robert Harvey; 19.11.2009

arrow_upward
3
arrow_downward

Очень простая версия, но не нужны плагины, и она работает:

$("#addtag").click(function(){
  $("ul li").hide()
  .filter(":contains('"+ $("#filter").val() +"')").show()
  return false;
})
person duckyflip    schedule 19.11.2009
comment
+1 Я только что попробовал, и это действительно работает (хотя соответствие чувствительно к регистру). - person Robert Harvey; 20.11.2009
comment
как li.text() может быть в нижнем регистре в этом выражении? val «изолирован», но li.text отсутствует в выражении. есть ли способ сделать это? - person Toni Michel Caubet; 06.05.2012

arrow_upward
3
arrow_downward

Небольшое улучшение ответа duckyflip, чтобы сделать поиск нечувствительным к регистру:

$.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;
});
person Manny    schedule 28.03.2014