标签内部HTML的jQuery过滤器

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

<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）似乎没有像我预期的那样工作。

来源

2014-08-28 Byron Ferguson

我不明白，为什么你把网址，在那里或者这只是垃圾邮件？对不起，如果你是合法的！ – simonmorley 2014-08-28 18:02:11

对于网址我很抱歉。我应该把它们拿出来。他们只是从复制粘贴。 – 2014-08-28 18:31:27

什么你不能在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/

来源

2014-08-28 18:05:02

我不确定。我已经能够从firstChild中获取innerHTML，但是无论我传回filter（）。show（）都不起作用 – 2014-08-28 18:42:53

啊，您正在混合并匹配jQuery和标准JavaScript调用。 'this'不是一个jQuery对象，而是'$（this）'。 'innerHTML'也是标准的javascript，而不是jQuery。您可以在检索DOM对象后使用它，但'.html（）'更简单。请参阅上面的编辑。 – 2014-08-28 18:47:56

你的jsfiddle很棒，但是当我尝试匹配功能时，我必须在我身边丢失一些东西。 JSFiddle正是我想要的。现在，一旦我击中ELSE声明，它隐藏了一切，但没有显示匹配 – 2014-08-28 19:00:09

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

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

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

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

来源

2014-08-28 18:01:28 derdida

我同意。在这里使用'indexOf'似乎是最好的选择。但是，它似乎也是OP不希望在管道'|'后面匹配文本，所以我们也将它分开。 'myString.split（'|'）[0] .indexOf（searchString.toLowerCase）> = 0' – Ohgodwhy 2014-08-28 18:02:45

好点，是的。 – derdida 2014-08-28 18:03:49

标签内部HTML的jQuery过滤器

回答

相关问题