使搜索输入通过列表 Jquery 过滤 [英] Make search input to filter through list Jquery

查看：14 发布时间：2021/12/23 15:50:30 jquery input filter hide show

本文介绍了使搜索输入通过列表 Jquery 过滤的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

嘿，我正在尝试创建一个搜索字段，该字段将根据用户输入的内容和单击搜索按钮的内容过滤或显示/隐藏(哪个最好)列表元素.我不知道该怎么做.不幸的是，我尝试的所有方法都不起作用，我不确定最好的方法，比如我是使用显示和隐藏还是有更好的方法?

这是我的 HTML:

<头><身体><label for="filter">过滤器</label><input type="text" name="filter" value="" id="filter"/><a id="addtag" href="#">搜索</a><ul><li id="Hero1">超人</li><li id="Hero2">蝙蝠侠</li><li id="Hero3">蜘蛛侠</li><li id="Hero4">钢铁侠</li><li id="Hero5">绿巨人</li>

因此，如果有人输入超人"并单击搜索按钮，则只会显示超人列表元素.

对此的任何帮助都会很棒.谢谢.

解决方案

这也使用了 jQuery 并创建了一个滑动动画.这将是 HTML:


<h1 id="header">国家列表</h1><ul id="列表"><li><a href="#">列表项</a></li><li><a href="#">添加无限项</a></li>

JavaScript

(函数 ($) {//不区分大小写的自定义 css 表达式 contains()jQuery.expr[':'].Contains = function(a,i,m){return (a.textContent || a.innerText || "").toUpperCase().indexOf(m[3].toUpperCase())>=0;};function listFilter(header, list) {//header 是任何元素，list 是一个无序列表//创建过滤器表单并将其添加到标题var form = $("").attr({"class":"filterform","action":"#"}),input = $("").attr({"class":"filterinput","type":"text"});$(form).append(input).appendTo(header);$(输入).change( 函数 () {var filter = $(this).val();如果(过滤器){//查找包含输入的列表中的所有链接，//并隐藏那些不包含输入的，同时显示那些包含的$(list).find("a:not(:Contains(" + filter + "))").parent().slideUp();$(list).find("a:Contains(" + filter + ")").parent().slideDown();} 别的 {$(list).find("li").slideDown();}返回假；}).keyup( 函数 () {//在每个字母之后触发上述更改事件$(this).change();});}//ondomready$(函数(){listFilter($("#header"), $("#list"));});}(jQuery));

CSS 是可选的.JSFiddle 演示:http://jsfiddle.net/4feug/

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/

这篇关于使搜索输入通过列表 Jquery 过滤的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文

使搜索输入通过列表 Jquery 过滤 [英] Make search input to filter through list Jquery

问题描述

相关文章

其他开发最新文章

热门教程

热门工具

登录关闭

使搜索输入通过列表 Jquery 过滤 [英] Make search input to filter through list Jquery

问题描述

相关文章

其他开发最新文章

热门教程

热门工具

登录 关闭

登录关闭