API之模拟百度搜索

笑着哭i 提交于 2020-01-18 23:05:08

步骤

  1. 定义一个keyWords字符串数组
  2. 获取所有需要的元素(获取文本框)
  3. 文本框注册键盘抬起事件,以及书写事件函数
  4. 事件函数中首先要获取去文本框内输入的内容
  5. 然后创建一个临时数组,存放对应的数据
  6. 把输入的字符和最开始定义的keyWords数组中的每一项数据做对比,那么就需要一个循环
  7. 如果输入的字符和数组中每一项数据的0位置上的字符能顾匹配上,那么就把它放入临时数组里
  8. 如果文本框内没有输入内容或者临时数组为空,那么就不创建div
  9. 如果用户输入的值和临时数组里面的数据相匹配,那么开始便利临时数组,创建div,然后把div加入box中
  10. 每次键盘抬起都判断有没有后面加的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>
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!