Javascript 过滤HTML列表：使li元素最初不可见

这是HTML：

<input type="text" id="myInput" onkeyup="myFunction()" placeholder="orasul tau..">

<ul id="myUL">
    <li>Bucuresti</li>
    <li>Cluj</li>
    <li>Timisoara</li>
</ul>

我想根据输入中的文本过滤ul的元素

没有初始的

if

语句，一切都正常工作，但我希望所有

li

元素最初都有

diplay:none

。如果添加

if

将禁用整个筛选。我怎么能做到这一点，有什么可能的解决办法吗

---

任何帮助都将不胜感激。

问题是

$（“#myUL li”）.style.display=“none”

没有意义

$（“#myUL li”）

是jQuery实例对象，而不是HtmleElement。所以它没有属性

样式

使用
$（“#myUL li”）.hide（）隐藏所有元素

但是，更好的方法是使用CSS最初隐藏
LI
，如果
myInput
有值，则在页面加载时触发一次搜索：


var$input=$（'#myInput'）。在（'input'，function（）上{
var searchString=$（this.val（）；
$（“ul li”）。每个函数（索引、值）{
var currentName=$（值）.text（）
var shouldShow=searchString.length&¤tName.toUpperCase（）.indexOf（searchString.toUpperCase（））>-1；
如果（应该显示）{
$（value.show（）；
}否则{
$（value.hide（）；
}
});
});
var值=$input.val（）；
如果（value.length！==0）{
$input.trigger（'keyup'）；
}
#李美儿{
显示：无；
}


比丘里斯蒂
克卢伊
蒂米什瓦拉
问题是
$（“#myUL li”）.style.display=“none”
没有意义
$（“#myUL li”）
是jQuery实例对象，而不是HtmleElement。所以它没有属性
样式

使用
$（“#myUL li”）.hide（）隐藏所有元素

但是，更好的方法是使用CSS最初隐藏
LI
，如果
myInput
有值，则在页面加载时触发一次搜索：


var$input=$（'#myInput'）。在（'input'，function（）上{
var searchString=$（this.val（）；
$（“ul li”）。每个函数（索引、值）{
var currentName=$（值）.text（）
var shouldShow=searchString.length&¤tName.toUpperCase（）.indexOf（searchString.toUpperCase（））>-1；
如果（应该显示）{
$（value.show（）；
}否则{
$（value.hide（）；
}
});
});
var值=$input.val（）；
如果（value.length！==0）{
$input.trigger（'keyup'）；
}
#李美儿{
显示：无；
}


比丘里斯蒂
克卢伊
蒂米什瓦拉

js


js

尝试
$（'#myUL li'）。隐藏（）
如下所示：


var value=$（'#myInput'）.val（）；
如果（value.length==0）{
$（'myUL li'）.hide（）；
}
$（'#myInput'）.bind（'keyup'，function（））{
var searchString=$（this.val（）；
$（“ul li”）。每个函数（索引、值）{
currentName=$（值）.text（）
if（searchString=''）{$（'#myUL li'）.hide（）；}
else if（currentName.toUpperCase（）.indexOf（searchString.toUpperCase（））>-1）{
$（value.show（）；
}否则{
$（value.hide（）；
}
});   
});
函数myFunction（）{}


比丘里斯蒂
克卢伊
蒂米什瓦拉
尝试
$（“#myUL li”）.hide（）
如下所示：


var value=$（'#myInput'）.val（）；
如果（value.length==0）{
$（'myUL li'）.hide（）；
}
$（'#myInput'）.bind（'keyup'，function（））{
var searchString=$（this.val（）；
$（“ul li”）。每个函数（索引、值）{
currentName=$（值）.text（）
if（searchString=''）{$（'#myUL li'）.hide（）；}
else if（currentName.toUpperCase（）.indexOf（searchString.toUpperCase（））>-1）{
$（value.show（）；
}否则{
$（value.hide（）；
}
});   
});
函数myFunction（）{}


比丘里斯蒂
克卢伊
蒂米什瓦拉
谢谢，工作正常！但是，在输入框中写入一些文本并将其删除后，所有元素仍会显示？有没有办法解决这个问题？@M.Vlad检查
searchString
是否为空，并将其用作显示/隐藏条件的一部分。检查更新的答案。谢谢，工作很好！但是，在输入框中写入一些文本并将其删除后，所有元素仍会显示？有没有办法解决这个问题？@M.Vlad检查
searchString
是否为空，并将其用作显示/隐藏条件的一部分。检查更新的答案。工作正常！但是，在输入框中写入一些文本并将其删除后，所有元素仍会显示。有没有办法解决这个问题？@M.Vlad，我已经更新了代码片段。请检查并让我知道-----谢谢。工作很好！但是，在输入框中写入一些文本并将其删除后，所有元素仍会显示。有没有办法解决这个问题？@M.Vlad，我已经更新了代码片段。请检查并让我知道——谢谢。
var value = $('#myInput').val();
if(value.length == 0) {
    $("#myUL li").style.display = "none";
}

$('#myInput').bind('keyup', function() {
    var searchString = $(this).val();    
    $("ul li").each(function(index, value) {
        currentName = $(value).text()
        if( currentName.toUpperCase().indexOf(searchString.toUpperCase()) > -1) {
           $(value).show();
        } else {
            $(value).hide();
        }
    });   
});

    var value = $('#myInput').val();
//if(value.length == 0) {
    //$("#myUL li").style.display = "none";
//}

$('#myInput').bind('keyup', function() {
    var searchString = $(this).val();        
    if(searchString == '') {
        document.getElementById('myUL').style.display = 'none';
    }
    else {
        document.getElementById('myUL').style.display = 'block';
    }
    $("ul li").each(function(index, value) {
        currentName = $(value).text()
        if( currentName.toUpperCase().indexOf(searchString.toUpperCase()) > -1) {
           $(value).show();
        } else {
            $(value).hide();
        }
    });   
});