标签内部HTML的jQuery过滤器

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'只返回一个值。这些搜索字符串有效;然而，如果有人输入“堪萨斯”，则显示的不是第2条记录。

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

Answer 1

什么你不能在a标签只是过滤器？请注意，this应该是$(this)以使用jQuery函数。而innerHTML的jQuery版本是.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/

Answer 2

你不需要这样的正则表达式。你可以只检查是否搜索字符串是在其他字符串：

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

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

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