如何使用过滤器显示输入值?

时间:2013-06-27 18:38:44

标签: jquery filter contains

我正在尝试隐藏所有<li>元素,然后仅显示包含子<li>的{​​{1}}个文本,其中的文字与输入/搜索字段的值相匹配。

HTML:

<p>


JS:

<input id="search" type="text" placeholder="Search">

<ul class="items">

    <li class="item">
        <p class="keywords" style="display: none;">skins, hair</p>//keywords
        <a class="thumb" href="#"><img src="koalahat.jpg"></a>
    </li>

    <li class="item">
        <p class="keywords" style="display: none;">hair</p>
        <a class="thumb" href="#"><img src="goosehat.jpg"></a>
    </li>

</ul>

我无法弄清楚为什么将$('#search').keyup(function(){ var typed = $(this).val(); //get the input field value $('.items li').hide() //hide all LIs... $('.items li').filter(function(){ //filter all LIs that... $('.items li p.keywords:contains(typed)').parent().show(); //... that contain the typed keywords, and show them. }); console.log(typed); }) 更改为$('.items li p.keywords:contains(typed)')会返回所需的输出,前者则不会。

1 个答案:

答案 0 :(得分:0)

字符串连接问题。试试这个:

$('p.keywords:contains("' + typed + '")', this).parent().show(); 

我认为您需要的只是:

$('#search').keyup(function () {
    var typed = this.value; //get the input field value
    $('.items li').hide() //hide all LIs...
    $('.items li').find('p.keywords:contains("' + typed + '")', this).parent().show();
    console.log(typed);
})

<强> Fiddle

虽然问题在于,在选择器$('.items li p.keywords:contains(typed)')中,typed被视为字符串而不是变量,因此不会评估其值。相反,您应该将变量与字符串连接起来。而且你也可以取消过滤器,只需选择器即可。