javascript模拟百度搜索的提示语

April 7, 2018

6142 views

1057 words

描述：当用户输入要搜索的内容的时候，程序会自动识别用户输入的内容，并且与已有的数据进行对比，如果已有数据是以用户输入的内容开头的，就会在输入内容的下方进行提示，用户点击提示语，内容会自动填入输入框，并隐藏其他提示语。
示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>模拟百度搜索</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }
        .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">
    <button>搜索</button>
</div>
</body>
</html>
<script>
    //模拟从服务器获取的资源
    var arr = ["a","ab","abc","abcd","aa","aaa"];
    //获取相关元素
    var box = document.getElementsByClassName("box")[0];
    var inp = document.getElementsByTagName("input")[0];
    //绑定事件（键盘弹起事件）
    inp.onkeyup = function () {
        var newArr = [];//创建一个新数组来存放要显示的li内容
        /**
         * 循环进行比较，数组中的内容是否以输入的内容开头
         */
        for(var i = 0;i<arr.length;i++){
            var val = this.value;
            if (arr[i].indexOf(val)===0){
                newArr.push("<li>"+arr[i]+"</li>");
            }
        }
        //把数组转换成字符串
        var str = newArr.join("");
        //判断ul是否存在
        if (box.children[2]){
            box.removeChild(box.children[2]);
        }
        //如果输入内容为空，或者没有以输入内容为空的元素就切断函数
        if (this.value.length===0||newArr.length===0){
            return;
        }
        //创建ul标签，并且加入到适当的位置
        var ul = document.createElement("ul");
        ul.innerHTML = str;
        box.appendChild(ul);
        //获取所有的li，点击li的时候，为input表单赋值，并且隐藏下面的提示
        var liArr = document.getElementsByTagName("li");
        for (var i = 0; i<liArr.length;i++){
            console.log(i);
            liArr[i].onclick = function () {
                inp.value = this.innerHTML;
                box.removeChild(box.children[2]);
            }
        }
    }

</script>

javascript模拟百度搜索的提示语