jquery ul list过滤器仅在搜索关键字连续/连续时才有效

时间:2012-11-01 09:38:57

标签: jquery search filter

我的jquery过滤器函数没有什么问题,它来自互联网并为我的目的修改它。

jsFiddle example

以下是代码:

    (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":"Live-Filterfunktion"});
$(form).append(input).appendTo(header);
$(input)
.change( function () {

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

$('.serien 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
        //console.log($(this).attr('id')+' contains '+filter);
        //$(this).find("a:Contains(" + filter + ")").parent().fadeIn();
        $(this).parent().show();

    }else{
        // The substring is not contained -> hide parent
        //console.log($(this).attr('id')+' does not contain '+filter);
        //$(this).find("a:not(:Contains(" + filter + "))").parent().fadeOut();
        $(this).parent().hide();
    }
});


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('')
      $(this).change();

      });
 });

}(jQuery));

过滤器效果很好,我甚至可以忽略这些空格。但我有一个问题,我无法修复。仅当搜索关键字在一行中时,过滤器的匹配才有效。

jsFiddle link

的示例

输入输入字段“John Wayne”甚至“johnwayne”,它运行正常! 但现在键入“John Tayler”并且它没有用,因为搜索关键字不是连续/连续但列表包含两个关键字。我尝试过并试过但我无法让它发挥作用。

所以我希望我能得到一些帮助,这会很棒。 对不起我来自波兰的坏工程师。

问候!

0 个答案:

没有答案