1

だから私はjqueryでフィルター関数を作ろうとしています。しかし、私はそれを適切に機能させることができません。これが私がやろうとしていることです

  1. HTML リストがあります
  2. 入力があります
  3. この入力は、リストをリアルタイムでフィルタリングします (キーアップでリストをフィルタリングします)。
  4. 追加ボタンをクリックすると、現在のフィルターが保存されます
  5. これらの保存されたフィルターは OR フィルターとして機能するため、リストまたは入力にないものはすべて除外されます。

ファンのためのフィドル

HTML

<div id="filter">
    <div id="filters"></div>
    <input id="search" type="text" value="" /> <a id="addFilter">ADD</a>

</div>
<ul>
    <li class="log">Test 1</li>
    <li class="log">Test 2</li>
    <li class="log">Test 3</li>
    <li class="log">Bla 1</li>
    <li class="log">Blab 2</li>
    <li class="log">Siawq 3</li>
</ul>

jQuery:

//case insencitive :contains()
$.expr[":"].contains = $.expr.createPseudo(function (arg) {
    return function (elem) {
        return $(elem).text().toUpperCase().indexOf(arg.toUpperCase()) >= 0;
    };
});

//OnClick of add button, add filter to list, clear field
$("#addFilter").click(function () {
    if($('input#search').val() != ""){
        //filters.push();
        $("#filters").append("<div>"+$('input#search').val()+"</div>");
        $('input#search').val("");
    }
});

//On Click of filter list item to remove filter
$("#filters").on('click',"div",function() {    
    $(this).remove();
    $("input#search").change();
});

//Filter event on change and keyup
$("input#search").change(function () {
    var filter = $(this).val();
    if (filter) {
        var matches = $("ul").find('li.log:Contains(' + filter + ')');

        var obj = $('#filters > div');
        var arr = $.makeArray(obj);
        for(var i = 0;i<arr.length;i++){
            var add = $("ul").find('li.log:Contains(' + arr[i].innerText + ')');
            matches = $.extend(matches,add);
        }
        $("li.log").not(matches).slideUp();
        matches.slideDown();
    } else {
        $("ul").find("li.log").slideDown();
    }
    return false;
})
    .keyup(function () {
    $(this).change();
});
4

1 に答える 1

1

Ok another hour of fiddling and i've found my answer.

FIDDLE FOR FANS

if (filter) {
        var matches = $("ul").find('li.log:Contains(' + filter + ')');

        var obj = $('#filters > div');
        var arr = $.makeArray(obj);
        for(var i = 0;i<arr.length;i++){
            var add = $("ul").find('li.log:Contains(' + arr[i].innerText + ')');
            matches = $.extend(matches,add);
        }
        $("li.log").not(matches).slideUp();
        matches.slideDown();
}

Should be:

if (filter || arr.length != 0) {
    if (filter) {
        var matches = $("ul").find('li.log:Contains(' + filter + ')');
    } else {
        var matches = $();
    }

    for (var i = 0; i < arr.length; i++) {
        matches = matches.add('ul li.log:Contains(' + arr[i].innerText + ')');
    }
    $("li.log").not(matches).slideUp();
    matches.slideDown();
}
于 2013-03-12T15:29:12.307 に答える