0

I am trying to implement filtering mechanism using JavaScript in the UI by traverse through the DOM and find for a searched word. This is how my HTML and UI looks like. enter image description here

So the idea is that once the data(which is dynamic) get loaded from the back-end(through java) i want to traverse the DOM in HTML for a particular keyword they searched. this is how i am writing the JS in Jquery

$(document).ready(function() {
     jQuery('#txtSearch').keyup(function(event){
        if (event.keyCode == 27) {
            resetSearch();
        }

        if (jQuery('#txtSearch').val().length > 0) {
            jQuery('.list-group-item').hide();
            jQuery('.list-group-item span.assignee-style:Contains(\'' + jQuery('#txtSearch').val() + '\')').
            parent('li').parent('ul').parent('li').show();

        }

        if (jQuery('#txtSearch').val().length == 0) {
            resetSearch();
        }

    });      

    function resetSearch(){
        jQuery('#txtSearch').val('');
        jQuery('.list-group-item').show();
        jQuery('#txtSearch').focus();
    }



});

The behavior i am expecting is that when i search for "john" i want only the data(in all 3 columns) that contains "John" to appear. just as a start i am just traversing the DOM by Assignee name only. but the results are not as i wanted. What am i doing wrong?

4

2 回答 2

1

.parent需要一个选择器，而不仅仅是一个标签名称，所以为什么不简化为：

$(document).ready(function() {
     jQuery('#txtSearch').keyup(function(event){
        var search = jQuery('#txtSearch').val();
        if (event.keyCode == 27) {
            resetSearch();
        }

        if (search.length > 0) {
            jQuery('.list-group-item').hide();
            jQuery('.list-group-item span.assignee-style:contains(\'' + search + '\')').
                parent('.list-group-item').show();
        }
        else {
            resetSearch();
        }

    });      

    function resetSearch(){
        jQuery('#txtSearch').val('');
        jQuery('.list-group-item').show();
        jQuery('#txtSearch').focus();
    }
});
于 2013-08-19T17:24:39.983 回答
1

:contains()与选择器匹配是区分大小写的。搜索“john”不会找到“John”。

于 2013-08-19T17:25:07.973 回答