步骤

定义一个keyWords字符串数组
获取所有需要的元素（获取文本框）
文本框注册键盘抬起事件，以及书写事件函数
事件函数中首先要获取去文本框内输入的内容
然后创建一个临时数组，存放对应的数据
把输入的字符和最开始定义的keyWords数组中的每一项数据做对比，那么就需要一个循环
如果输入的字符和数组中每一项数据的0位置上的字符能顾匹配上，那么就把它放入临时数组里
如果文本框内没有输入内容或者临时数组为空，那么就不创建div
如果用户输入的值和临时数组里面的数据相匹配，那么开始便利临时数组，创建div，然后把div加入box中
每次键盘抬起都判断有没有后面加的div，如果有那么就删除

代码如下：

<body>
    <div id="box">
        <input type="text" value="" id="txt">
        <input type="button" value="搜索" id="btn">
    </div>
    <script>
        var keyWords = ['小样酸q糖', '小样我就这样', '小机灵鬼', '小仙女', '别---薛之谦', '别那么骄傲-----金海心', '许嵩----明智之举', '许仙白娘子', '小龙女杨过', '白羊', '白夜行'];
        var btn = document.getElementById('btn');
        var txt = document.getElementById('txt');
        //注册键盘抬起事件，并书写事件函数
        txt.onkeyup = function () {
            //获取文本框输入的内容
            var text = this.value;
            //创建一个临时数组，存放对应的数据；
            var tempArr = [];
            //把输入的字符串和keyWord数组中的数据的每一项作对比
            for (var i = 0; i < keyWords.length; i++) {
                //如果输入的字符和数组中是0位置出现的能匹配上，就把数据放入临时数组里
                if (keyWords[i].indexOf(text) === 0) {
                    tempArr.push(keyWords[i]);//把数据追加到最后
                }
            }
            //临时数组已经存在
            var box = document.getElementById('box');
            var dv = document.getElementById('dv');
            //每次键盘抬起都判断有没有dv这个div
            if (dv) {
                //如果有就删除一次
                box.removeChild(dv);
            }
            //如果文本框是空的或者临时数组是空的，不用创建div
            if (this.value.length === 0 || tempArr.length === 0) {
                // 判断页面中是否有div，有则删除
                if (dv) {
                    box.removeChild(dv);
                }
                return;
            }
            //如果文本框内的值和临时数组内的内容相匹配，那么开始遍历临时数组，创建div,然后把div加入到box中
            var divObj = document.createElement('div');
            box.appendChild(divObj);
            divObj.id = 'dv';
            divObj.style.width = '500px';
            divObj.style.border = '1px solid green';
            for (var i = 0; i < tempArr.length; i++) {
                var pObj = document.createElement('p');
                divObj.appendChild(pObj);
                pObj.innerText = tempArr[i];
                pObj.style.margin = '0';
                pObj.style.padding = '0';
                pObj.style.marginLeft = '5px';
                pObj.style.marginTop = '5px';
                pObj.style.cursor = 'pointer';
                pObj.onmouseover = function () {
                    this.style.backgroundColor = '#def';
                }
                pObj.onmouseout = function () {
                    this.style.backgroundColor = '';
                }
            }


        }
    </script>

</body>

API之模拟百度搜索

步骤

猜你喜欢