使用文本输入筛选 LI - 嵌套 LI 不显示

Filter LIs with text input - nested LIs not showing?

本文关键字：LI 嵌套显示筛选文本输入更新时间：2023-09-26

我正在尝试使用键控文本输入过滤特定 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);
    });     
});

如果你不想更改 html，你可以将 .toggle（）更改为 .css（"可见性"）

$('.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/这只会显示实际的"李"
要删除if(currentLiText.replace(/'s+/g, '')!=""){部分，您需要删除HTML
中多余的空格和新行更新
不区分大小写

$('.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 中的空格

注意：这会使大量的 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)
    })
});