Jquery :contains 应该忽略空格答案

【问题标题】：Jquery :contains should ignore whitespaceJquery :contains 应该忽略空格
【发布时间】：2012-08-10 12:09:10
【问题描述】：

这是我运行良好的代码。在一个网站上找到并稍作修改。

<script>
(function ($) {
// custom css expression for a case-insensitive contains()
jQuery.expr[':'].Contains = function(a,i,m){
return (a.textContent || a.innerText || "").toUpperCase().indexOf(m[3].toUpperCase())>=0;
};
function listFilter(header, list) { // header is any element, list is an unordered list
// create and add the filter form to the header
var form = $("<form>").attr({"class":"filterform","action":"#"}),
input = $("<input>").attr({"class":"filterinput","type":"text", "value":"Filterfunktion"});
$(form).append(input).appendTo(header);
$(input)
.change( function () {
var filter = $(this).val();


if(filter) {
// this finds all links in a 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().fadeOut();
$(list).find("a:Contains(" + filter + ")").parent().fadeIn();
} else {
$(list).find("li").slideDown();
}
return false;
})
.keyup( function () {
// fire the above change event after every letter
$(this).change();
});
}
//ondomready
$(function () {
listFilter($(".filter"), $(".list"));
});

$(function() {
    $(".filterinput").focus(function() {
      $(this).val('')

      });
 });

}(jQuery));
</script>

但我无法开始工作的一件事是，当脚本带有空格并且我键入不带空格的 ist 时，脚本应该找到/匹配字符串。

例如：

我有

DCB 112。当我现在在我的输入字段中输入“DCB 112”时，它会正确过滤并显示给我。但是当我输入“DCB112”时，脚本无法匹配这个并且什么也没有显示。有解决办法吗？

来自波兰的问候！

【问题讨论】：

标签： jquery contains space

【解决方案1】：

好吧，也许有点扭曲，但我要做的是获取列表的所有链接并对其进行迭代，删除其文本的每个空格，并检查您要查找的文本是否在其中。像这样的：

var filter = $(this).val().replace(/\s+/g, '').toLowerCase();

// I'm omitting loads of code...
var text;
var index;
$(list).find('a').each(function(i, el){
    text = $(el).text().replace(/\s+/g, '').toLowerCase();
    index = text.indexOf(filter);
    if(index != -1){
        // The substring is contained -> show parent
    }else{
        // The substring is not contained -> hide parent
    }
});

希望它有所帮助并且有效，因为我没有对其进行测试：/

编辑：

测试和工作:)

http://jsfiddle.net/QVkuP/

【讨论】：

非常好。现在我尝试在我的代码中实现你的代码，因为我是新的@jquery/javascript ;)
现在我明白了。但它仅在我/脚本关心 CAPS 和 LOWER CASE 时才有效。我该如何解决？ ABC 125 所以只有 ABC125 有效，abc125 无效。
您能在 jsfiddle 中提供您的代码示例吗？我可以帮助您调整我的代码以适应您的代码
使用 toLowerCase() 方法可以使其不区分大小写（查看答案编辑）
这里是我的完整代码，仅适用于 CAPS 和 LOWE CASE：jsfiddle.net/QVkuP/20

【解决方案2】：

简单的方法：

filter.replace(/\s/g, '');

但只有当你有一个空格时它才会很好用，比如“DCB 112”。

艰难的道路：您需要先遍历您的列表以删除不匹配的链接。小心从两个值中删除空格以进行比较。并展示好的一面。

$(list).find("a").each(function()
{
    if($(this).text().replace(/\s/g, '') == filter.replace(/\s/g, ''))
    {
        $(this).parent().fadeIn();
    }
    else
    {
        $(this).parent().fadeOut();
    }
}

希望它会有所帮助，它仍然看起来有点难看，但它应该这样做......

【讨论】：