Question

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

我将允许用户输入搜索字符串，例如'zzz'，我想循环遍历'ul lists'，只选择带有包含搜索字符串的值的'li'。

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

<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>

我尝试使用以下代码但无效

$.each @inputs_list.find('li'), (index, user) ->
  if user.find('input')[value *='#{searchString}']
     console.log('selected', user)

如何修改代码以使搜索有效？

Answer 1

以下所有复选框都是“.inputs-list”的后代，使用.filter() method将集合缩减为其value属性中包含搜索字符串的集合，然后使用{{3}获取匹配输入所属的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();

Answer 2

我会看一下:contains的jQuery

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

http://api.jquery.com/contains-selector/

$('.inputs-list').find("li:contains('" + searchString + "')").css("text-decoration", "underline");

我会尝试这样的事情......

Answer 3

使用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();

});

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

演示：http://jsbin.com/uzotiy/edit#javascript,html

使用CSS隐藏/显示

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

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

演示：http://jsbin.com/uzotiy/2/edit#source

Answer 4

试试这个

此类搜索是搜索文本框。

        $(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");
                        }

                    });
                }
            });
        });

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

4 个答案:

使用jQuery隐藏/显示

使用CSS隐藏/显示