1

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

我将允许用户输入搜索字符串，例如“zzz”，并且我想遍历“ul 列表”以仅选择值包含搜索字符串的“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)

如何修改我的代码以使搜索工作？

4

4 回答 4

4

以下取所有“.inputs-list”的后代复选框，使用.filter()方法将集合缩减为在其 value 属性中包含搜索字符串的那些，然后使用该.closest()方法获取匹配输入所属的 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();
于 2012-05-16T06:59:16.903 回答
2

我会看看:containsjQuery

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

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

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

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

于 2012-05-16T06:36:45.880 回答
1

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

于 2012-05-16T07:02:11.217 回答
0

试试这个

这里的类搜索是搜索文本框。

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

                    });
                }
            });
        });
于 2012-05-16T07:20:48.293 回答