html 模糊查询代码

HTML模糊查询是一种非常实用的技术，在网站开发中经常会用到。下面我们来看一下HTML模糊查询代码。

input type="text" id="searchBox" onkeyup="search()">
    ul id="resultBox">
    /ul>
    script>
function search() {
    var input = document.getElementById("searchBox");
    var filter = input.value.toUpperCase();
    var ul = document.getElementById("resultBox");
    var li = ul.getElementsByTagName("li");
    for (var i = 0;
     i  li.length;
 i++) {
    var a = li[i].getElementsByTagName("a")[0];
    var text = a.textContent || a.innerText;
    if (text.toUpperCase().indexOf(filter) >
 -1) {
    li[i].style.display = "";
}
 else {
    li[i].style.display = "none";
}
}
}
    /script>
    

这段代码主要分为三个部分：输入框，列表和查询函数。首先，我们在页面中创建一个输入框和一个空的列表用于显示结果。当用户在输入框中输入内容时，通过onkeyup事件触发search函数，并将输入框中的内容作为过滤条件进行查询。

查询函数中，我们首先获取输入框的值并将其转化为大写字母，然后获取结果列表中的所有li标签，并遍历每个li标签中的a标签，将a标签中的文本内容同样转化为大写字母。接着，我们使用indexOf函数查找是否有匹配的结果，如果有，则将该li标签展示出来，否则隐藏它。

这段代码运用了JavaScript语言的基础知识和DOM操作，是实现HTML模糊查询的重要代码。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！