Question

我在页面上有一个工作搜索框。目标是隐藏与当前搜索字符串不匹配的任何LI项。但是，该列表是使用日历框架功能创建的，该功能还包括与我想要找到的场地名称相同的行上的城市信息。

<script type="text/javascript">

$(document).ready(function()
{
    $("#search").keyup(function()
    {
        // capture the current user search input, and create a RegEx for comparison
        var searchString = $.trim(this.value);
        var searchRegEx = new RegExp(searchString, "ig");

        // Begin evaluating the user input once the 3rd character is inputted
        if(searchString.length < 3)
        {
            // Otherwise make sure all records are displayed
            $('li').show();
        }
        else
        {
            // Hide all of the records
            $('li').hide();

            // Filter a list of records that match RegEx from user input, and then display
            $('li').filter(function()
            {
                return this.innerHTML.match(searchRegEx);
            }).show();
        }
    });
});
</script>

这是与INPUT TEXTBOX绑定的函数调用。下面是我想要显示/隐藏的示例。

<ul>
    <li><a href="http://somewebsite/path/index.php?com=location&amp;lID=154">American Royal</a> | <span>Kansas City</span>
    </li>

    <li><a href="http://somewebsite/path/index.php?com=location&amp;lID=155">Ameristar Casino Hotel Kansas City</a> | <span>Kansas City</span>
    </li>
</ul>

'Ameri'应该同时显示两者，而'American'只返回一个值。那些搜索字符串有用;然而，如果有人输入“堪萨斯”，它会显示两者而不仅仅是第二张唱片。

我已经成功捕获了A标记HTML，但匹配（searchRegEx）似乎没有像我预期的那样工作。

Answer 1

你不需要正则表达式。你可以检查searchstring是否在另一个字符串中：

if (myString.indexOf("America") >= 0)
...

或者它是否应该不区分大小写

if (myString.toLowerCase().indexOf(mysearchstring.toLowerCase) >= 0) {
....

Answer 2

您只能在a代码中过滤哪些内容？请注意，this应该$(this)才能使用jQuery函数。 jQuery版innerHTML为.html()。

$('li').filter(function()
{
    return $(this).find('a').first().html().match(searchRegEx);
}).show();

或者：

$('li').filter(function()
{
    return $(this).children('a').first().html().match(searchRegEx);
}).show();

演示：http://jsfiddle.net/jtbowden/28dbd286/

jQuery过滤标签的内部HTML

2 个答案: