如何使一个简单的jQueryfilter列表只接受整个单词，因此它不匹配部分单词，只匹配整个单词

http://jsfiddle.net/nicktheandroid/U8T8p/4/

(function($) { $('.filterinput').keyup(function() { var filter = $(this).val(); if (filter.length > 2) { // this finds all links in the list that contain the input, // and hide the ones not containing the input while showing the ones that do $(list).find("a:not(:Contains(" + filter + "))").parent().slideUp(); $(list).find("a:Contains(" + filter + ")").parent().slideDown(); } else { $(list).find("li").slideDown(); } return false; }) }(jQuery)); 

这将根据您键入的内容是否与列表中某个单词的任何部分匹配来过滤列表。 我试图让它只匹配整个单词，所以它不会说它有匹配，直到输入完整的单词。 Regex会是最好的吗？ 要么？ 我需要帮助，我尝试过的任何工作都没有。

Answer 1

像这样： http ： //jsfiddle.net/U8T8p/10/

  var containing = $('#list li').filter(function () { var regex = new RegExp('\\b' + a, 'i'); return regex.test($('a', this).text()); }).slideDown(); $('#list li').not(containing).slideUp(); 

正则表达式限制匹配当前输入的文本从单词边界开始的那些。 因此，输入’Stat’后你仍然会匹配’美国’。 您可以通过更改为RegExp('\\b' + a + '\\b', i)使其与完整单词匹配。

Answer 2

您可以使用已经提到的filter方法。 或者您可以使用自己的自定义filter轻松扩展jQuery，这是重用代码的好方法。

 $.expr[':'].containsWord = function(elem, index, match) { var text = $(elem).text(); return !!text.match(new RegExp('\\b' + match[3] + '\\b')); }; 

现在像使用任何其他内置filter一样使用它:containsWord('Some word') 。 见http://jsfiddle.net/U8T8p/9/

Answer 3

尝试这样的事情： http ： //jsfiddle.net/U8T8p/5/

 $(list).find("a").filter(function() { return $(this).text() != filter; }).parent().slideUp(); $(list).find("a").filter(function() { return $(this).text() === filter; }).parent().slideDown(); 

Answer 4

您可以使用.filter检查文本并向下滑动这些元素，并将这些元素作为jQuery对象传递给.not以使其他元素向上滑动： http ： //jsfiddle.net/U8T8p/8/ 。

 (function($) { $('.filterinput').keyup(function() { var filter = $(this).val(); if (filter.length > 2) { var a = $(list).find("a"); var x = a.filter(function() { return $(this).text() === filter; }); x.parent().slideDown(); a.not(x).parent().slideUp(); } else { $(list).find("li").slideDown(); } return false; }) }(jQuery));