如何使用jquery选择器在列表中搜索

我正在尝试使用jQuery实现搜索

我将允许用户输入一个搜索字符串，例如“zzz”，并且我希望在“ul列表”中循环，以仅选择包含搜索字符串的值的“li”

例如，如果zzz是搜索字符串，我只想选择第二个'li'，其中的值是'zzzaaa'

<ul class="inputs-list"><li>
   <label class="user">
      <input type="checkbox" value="abcd" name="optionsCheckboxes">
      <img style="height: 30px;" src="http://boom.dailymus.es/v1/users/profile/502245329/square">
      <span>abcdefg</span>
   </label>
</li>

<li>
  <label class="user">
    <input type="checkbox" value="zzzzaaaa" name="optionsCheckboxes">
    <img style="height: 30px;" src="http://boom.dailymus.es/v1/users/profile/547205429/square">
    <span>zzzzz</span>
  </label>
</li>

如何修改代码以使搜索工作正常？

我想看一下：jQuery的contains

$("div:contains('John')").css("text-decoration", "underline");

像这样的东西是我会尝试的

我想看一下：jQuery的contains

$("div:contains('John')").css("text-decoration", "underline");

---

像这样的东西是我会尝试的

以下内容采用.inputs列表的后代的所有复选框，使用将集合缩减为在其value属性中包含搜索字符串的集合，然后使用获取匹配输入所属的li元素：

var searchString = "zzz"; // obviously you'd get this from the user somehow

searchString = searchString.toLowerCase();
var matchingLIs = $("ul.inputs-list :checkbox").filter(function(){
                    return this.value.toLowerCase().indexOf(searchString) != -1;
                  }).closest("li");

您没有明确说明对匹配的li元素实际要做什么，但可以说您想隐藏所有不匹配的元素，您可以这样做：

$("ul.inputs-list > li").hide();
$("ul.inputs-list :checkbox").filter(function(i){
    return this.value.toLowerCase().indexOf(searchString) != -1;
}).closest("li").show();

---

以下内容采用.inputs列表的后代的所有复选框，使用将集合缩减为在其value属性中包含搜索字符串的集合，然后使用获取匹配输入所属的li元素：

var searchString = "zzz"; // obviously you'd get this from the user somehow

searchString = searchString.toLowerCase();
var matchingLIs = $("ul.inputs-list :checkbox").filter(function(){
                    return this.value.toLowerCase().indexOf(searchString) != -1;
                  }).closest("li");

您没有明确说明对匹配的li元素实际要做什么，但可以说您想隐藏所有不匹配的元素，您可以这样做：

$("ul.inputs-list > li").hide();
$("ul.inputs-list :checkbox").filter(function(i){
    return this.value.toLowerCase().indexOf(searchString) != -1;
}).closest("li").show();

使用jQuery隐藏/显示 起初，我会这样做：

// Real-time filtering, when the key is released
$("#terms").on("keyup", function(e){

  // Hide all list items, get those that match, show them
  $(".inputs-list li").hide().filter(function(){
    return $(this).text().match( new RegExp( e.target.value ) );
  }).show();

});

根据您列表的大小，我怀疑可能会有一个闪光，其中没有可见的元素。我目前正在研究一种更好的方法

演示：

用CSS隐藏/显示 使用CSS操作元素将比jQuery更快、更高效。因此，此方法仅添加和删除高亮显示类。类规则应负责突出显示或设置匹配元素的显示：

$("#terms").on("keyup", function(e){
  $(".inputs-list li")
    .removeClass("highlight")
    .filter(":contains(" + e.target.value + ")")
      .addClass("highlight");
});

演示：

使用jQuery隐藏/显示 起初，我会这样做：

// Real-time filtering, when the key is released
$("#terms").on("keyup", function(e){

  // Hide all list items, get those that match, show them
  $(".inputs-list li").hide().filter(function(){
    return $(this).text().match( new RegExp( e.target.value ) );
  }).show();

});

根据您列表的大小，我怀疑可能会有一个闪光，其中没有可见的元素。我目前正在研究一种更好的方法

演示：

用CSS隐藏/显示 使用CSS操作元素将比jQuery更快、更高效。因此，此方法仅添加和删除高亮显示类。类规则应负责突出显示或设置匹配元素的显示：

$("#terms").on("keyup", function(e){
  $(".inputs-list li")
    .removeClass("highlight")
    .filter(":contains(" + e.target.value + ")")
      .addClass("highlight");
});

演示：

试试这个

此处“类搜索”是“搜索”文本框

        $(document).ready(function()
        {
            $(".search").keyup(function()
            {
                var key=this.value;

                if(key.length>2)
                {
                    $(".user").each(function()
                    {
                        $this=$(this).find("input:first");
                        var val=$this.val();
                        var res = val.indexOf(key);


                        if(res!=-1)
                        {

                            $this.attr("checked","checked");
                        } 
                        else
                        {            
                            $this.removeAttr("checked");
                        }

                    });
                }
            });
        });   

试试这个

此处“类搜索”是“搜索”文本框

        $(document).ready(function()
        {
            $(".search").keyup(function()
            {
                var key=this.value;

                if(key.length>2)
                {
                    $(".user").each(function()
                    {
                        $this=$(this).find("input:first");
                        var val=$this.val();
                        var res = val.indexOf(key);


                        if(res!=-1)
                        {

                            $this.attr("checked","checked");
                        } 
                        else
                        {            
                            $this.removeAttr("checked");
                        }

                    });
                }
            });
        });   

---

难道不能通过将所有内容翻译成小写或大写来避免吗？难道不能通过将所有内容翻译成小写或大写来避免吗？谢谢您的解决方案！我认为这对我很有效我需要搜索不区分大小写。我正在考虑在比较之前将搜索字符串和值都设置为小写。但是有没有更简单的方法呢？对不起，我本想给你一个不区分大小写的解决方案，特别是在我在另一个答案上对这一点发表了评论之后，但是当我真正输入我的建议时，我忘了。我将用.toLowerCase更新我的答案，但您也可以使用不区分大小写的正则表达式测试，但这有点麻烦，因为您必须根据用户输入的内容创建正则表达式，这意味着您必须担心转义他们输入的在正则表达式中具有特殊意义的任何字符。感谢您的解决方案！我认为这对我很有效我需要搜索不区分大小写。我正在考虑在比较之前将搜索字符串和值都设置为小写。但是有没有更简单的方法呢？对不起，我本想给你一个不区分大小写的解决方案，特别是在我在另一个答案上对这一点发表了评论之后，但是当我真正输入我的建议时，我忘了。我将用.toLowerCase更新我的答案，但也可以使用不区分大小写的正则表达式测试，但这有点麻烦，因为您必须根据用户输入的内容创建正则表达式，这意味着您必须担心转义他们输入的在正则表达式中具有特殊意义的任何字符。