模拟搜索框从数据库加载数据解释一些小知识

最新推荐文章于 2022-02-08 01:16:18 发布

原创最新推荐文章于 2022-02-08 01:16:18 发布 · 631 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#js

js 专栏收录该内容

10 篇文章

订阅专栏

本文介绍了一个使用HTML和JavaScript实现的输入匹配下拉列表功能。当用户在文本框中输入内容时，会根据输入的文本从预定义的数组中筛选出匹配的选项并显示为下拉列表。此功能通过监听键盘按键释放事件来触发，并利用DOM操作实现了动态生成和更新下拉列表。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            padding: 0px;
            margin: 0px;
        }
        .box{
            width: 500px;
            margin: 200px auto;
        }
        ul{
            width: 392px;
            padding: 5px;
            list-style: none;
            border: 1px solid red;
        }
        li:hover{
            background-color: red;
        }
        input{
            width: 400px;
        }
        button{
            width: 70px;
        }
    </style>
</head>
<body>
    <div class="box">
        <input type="text" id="aaa"/>
        <button>搜索</button>
    </div>
    <script>
        //模拟服务器获取内容
        var arr = ["a","ab","abc","abcd","aa","aaa"];
        var box = document.getElementsByTagName("div")[0];
        //children 返回指定元素的子元素集合
        var inp = box.children[0];
        //绑定事件,onkeyup事件会在键盘按键被松开时发生
        inp.onkeyup = function () {
            //创建一个字符串，里面添加满了li对应的内容
            var newArr = [];
            //需要遍历老数组
            for(var i=0;i<arr.length;i++){
                //判断当前项，是否以input内容为开头
                var val = this.value;
                // 获得文本框的值
                if(arr[i].indexOf(val)===0){
                    //indexOf()方法可返回某个指定的字符串值在字符串中首次出现的位置
                    newArr.push("<li>"+arr[i]+"<li/>");
                }
            }
            var str = newArr.join("");

            //Bug1.每次创建新的ul之前，先删除旧的ul
            //只有ul存在我们才能删除ul
//            var aaa = box.getElementsByTagName("ul")[0];
            if(box.children[2]){
                //只要存在，那么就是object，object类型的数据，只要不是null,对应的boolean值都是true；
                box.removeChild(box.children[2]);
            }
            //Bug2.如果input中内容为空，那么就不能在生成ul了。
            //如果input为空，那么切断函数

            //Bug3.如果arr数组中没有以input为开头的元素。那么切断函数
            //newArr的长度为0，就能证明以input内容为开头的元素，在arr中不存在
            if(this.value.length === 0 || newArr.length === 0){
                //切断函数(不在产生新的ul)
                return;
            }
            //3.书写事件驱动程序
            var ul = document.createElement("ul");
            //把创建好的内容添加到ul中。
            ul.innerHTML = str;
            box.appendChild(ul);
        }
    </script>
</body>
</html>

indexOf()方法可返回某个指定的字符串值在字符串中首次出现的位置。只有返回值为0那么字符串才是以参数开头的。如果查询不到就返回-1.

onkeyup事件会在键盘按键松开时发生.

join()方法用于把数组中的所有元素放入一个字符串。