Question

我正在尝试使用keyup文本输入过滤特定LI的UL。问题是，LI嵌套在树中，并且过滤器只能看到最顶部的LI，并且似乎没有正确过滤。打字宾夕法尼亚州应该只显示宾夕法尼亚州，而不是它。有任何想法吗？提前谢谢。

http://www.jsfiddle.net/CDAVZ/412

HTML

<input type='text' value='[Enter search term followed by Return]' class='allW treeSearch' />
  <ul id="treeview">
    <li data-expanded="true"><span class="icon-location-7 md-moon delBlue treeSpace" data-icon="&#xe6b5;"></span>
    <span class="icon-location-7 md-moon white treeSpace" data-icon="&#xe6b5;"></span>Root
        <ul>
            <li data-expanded="true"><span class="icon-stack-6 md-moon delLtBlue treeSpace" data-icon="&#xe6a0;"></span>
            <span class="icon-stack-6 md-moon white treeSpace" data-icon="&#xe6a0;"></span>Gas Model
              <ul>
                  <li data-expanded="true"><span class="glyphicon glyphicon-globe md-moon delGreen treeSpace"></span>
                  <span class="glyphicon glyphicon-globe md-moon white treeSpace"></span>United States
                    <ul>
                        <li data-expanded="true"><span class="icon-pie md-moon delBlue treeSpace" data-icon="&#xe708;"></span>
                        <span class="icon-pie md-moon white treeSpace" data-icon="&#xe708;"></span>Pennsylvania

                        </li>
                    </ul>
                  </li>
              </ul>
            </li>
         </ul>
      </li>
  </ul>

的jQuery

$('.treeSearch').click(function(){
    $(this).val(''); 
});

$('.treeSearch').keyup(function(){

    var searchText = $(this).val();

    $('#treeview ul').each(function(){

        var currentLiText = $(this).text(),
            showCurrentLi = currentLiText.indexOf(searchText) !== -1;

        $(this).toggle(showCurrentLi);

    });     
});

Answer 1

注意：这会进行广泛的dom操作....请注意与之相关的成本

根据我的理解，您需要进行dom结构更改才能实现此目的

$('.treeSearch').click(function () {
    $(this).val('');
});

RegExp.quote = function (str) {
    return (str + '').replace(/([.?*+^$[\]\\(){}|-])/g, "\\$1");
};

$('#treeview li').each(function () {
    var $this = $(this);
    var text = $this.contents().map(function () {
        return this.nodeType == 3 && $.trim($(this).text()) != '' ? $.trim($(this).text()) : undefined;
    }).get().join(' ');

    $this.data('parent', $this.parent()).data('text', text);
})


$('.treeSearch').keyup(function () {

    var regex = new RegExp(RegExp.quote(this.value), 'i');

    var $selected = $('#treeview li').removeClass('selected').hide().filter(function () {
        return regex.test($(this).data('text'));
    }).addClass('selected').show();

    $selected.each(function () {
        var $this = $(this),
            $parent = $this.parent(),
            $ul = $this.data('parent');

        var $li = $this;
        while ($ul.is(':not(#treeview)') && !$ul.parent().hasClass('selected')) {
            $li = $ul.parent();
            $ul = $li.parent();
        }
        $this.appendTo($ul)
    })

});

Answer 2

如果您不想更改html，可以更改.tss的“.toggle（）”（“visibility”）

$('.treeSearch').click(function(){
    $(this).val(''); 
});
$('.treeSearch').keyup(function(){
    var searchText = $(this).val();
$('#treeview li').contents().filter(function() {
    return this.nodeType == 3;
}).each(function(){
var currentLiText = $(this).text();
    if(currentLiText.replace(/\s+/g, '')!=""){
        if(currentLiText.indexOf(searchText) !== -1){
            $(this).parent("li").css({"visibility": "visible"});
        }
        else{
         $(this).parent("li").css({"visibility": "hidden"});
        }
    }
});     
});

http://jsfiddle.net/HLWMv/1/
这只会显示实际的“li”
删除你需要删除html中额外空格和新行的if(currentLiText.replace(/\s+/g, '')!=""){部分 UPDATE
不区分大小写

$('.treeSearch').click(function(){
$(this).val(''); 
});
$('.treeSearch').keyup(function(){

var searchText = $(this).val();

$('#treeview li').contents().filter(function() {
    return this.nodeType == 3;
}).each(function(){

    var currentLiText = $(this).text().toLowerCase();
        if(currentLiText.indexOf(searchText.toLowerCase()) !== -1){
            $(this).parent("li").css({"visibility": "visible"});
        }
        else{
         $(this).parent("li").css({"visibility": "hidden"});
        }
});     
});

http://jsfiddle.net/HLWMv/2/
我删除了HTML中的空格

使用文本输入过滤LIst - 嵌套的LIst没有显示？

2 个答案: