Question

我正在为数据创建自定义过滤器。我想在精确的单词匹配上显示结果。例如，我有以下数据。如果我们键入＆＃34; amit＆＃34;在搜索输入中，第一行应该显示哪个有效，但是当我们键入＆＃34; mit＆＃34;不应该看到任何行。 fiddle

<li><strong>my name is amit</strong>, address</li>
<li><strong>my name is geeta</strong>, address</li>
<li><strong>my name is xyz</strong>, address</li>

Answer 1

试试此代码

$(function(){

    $('.inp').keyup(function(){

        var searchText = $(this).val();

        $('ul > li').each(function(){

            var currentLiText = $(this).text(),
                showCurrentLi = currentLiText.indexOf(searchText) !== -1;

            $(this).toggle(showCurrentLi);

        });     
    });

});

链接：http://jsfiddle.net/sumL5eas/5/

Answer 2

在Sridhar解决方案的基础上，我构建了一个演示https://jsfiddle.net/sumL5eas/15/，它还搜索了起始词：

在我的解决方案中，首先检查文本是否以搜索词开头，如果是，则显示该项。否则，它会使用" " + searchTerm搜索文本。

$('.inp').keyup(function(){

    var searchText = $(this).val();

    $('ul > li').each(function(){

        var currentLiText = $(this).text();
        var showCurrentLi = currentLiText.indexOf(searchText) == 0;
        if(!showCurrentLi)
          showCurrentLi = currentLiText.indexOf(" " + searchText) !== -1;

        $(this).toggle(showCurrentLi);

    });     
});

显示并突出显示确切的单词匹配

2 个答案: