完整代码：Javascript模拟百度搜索

最新推荐文章于 2024-03-17 22:33:14 发布

前端-阿来

最新推荐文章于 2024-03-17 22:33:14 发布

阅读量591

点赞数 2

文章标签： javascript js html 模拟百度搜索完整代码

本文链接：https://blog.csdn.net/weixin_43482353/article/details/97875329

版权

js实现模拟百度搜索

首先，我们分析一下需求，不妨来观察一下百度搜索：百度

在这里插入图片描述

我们能够发现以下几点：

1.当我们输入时可以看到总是从前到后匹配关键字 。
2.下面的div不输入时不显示，输入完按键弹起时显示并且匹配内容。
3.鼠标点击内容后，内容显示到文本框，并且跳转。

对应需求我们能想到的解决办法：

1.indexOf()方法；
2.onkeyup事件；
3.onclick事件；

下面让我们来看完整代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>我家yueyueyue来越好看</title>
    <style>
    #box {
        width: 450px;
        margin: 200px auto;
      }
  
      #txt {
        width: 350px;
      }
      /*p标签样式用于绑定*/
      .p{
          margin: 0px;
          padding: 0px;
          cursor: pointer;
          margin-top: 5px;
          margin-left: 5px;
      }
      /*div样式用于绑定*/
      .div{
        width: 350px;
        border: 1px solid pink;
      }
    </style>
</head>
<body>
    <div id="box">
    <input type="text" id="txt" value="">
    <input type="button" value="百度一下" id="btn">
</div>
    <script src="commom.js"></script>
    <script>
        //模拟数据来源
        var keyWords = ["小杨是最纯洁的", "小杨是最帅的", "狂龙傲天拳", "九阴白骨爪", "灵气寒霜指", "惊天混元掌", "八卦迷踪腿", "乾坤大挪移", "如来神掌", "独狐九剑"];
        //没此抬起都检测有没有div 如果有就删除
        myid$("txt").onkeyup = function(){
            if(myid$("dv"))
            {
                myid$("box").removeChild(myid$("dv"));
            }
            //获取文本框的内容
            var text = this.value;
            //新建一个临时数组
            var linObj = [];
            for (let i = 0; i < keyWords.length; i++) {
                //顺序查找
                if(keyWords[i].indexOf(text) == 0)
                {
                    //追加到临时数组中去
                    linObj.push(keyWords[i]);
                }
                
            }
            
            //判断当没有输入时，删除div
            if(this.value.length == 0 || linObj.length == 0)
            {
                if(myid$("dv"))
                 {
                     myid$("box").removeChild(myid$("dv"));
                 }
                return;
            }
            //创建div
            var dvObj = document.createElement("div");创建元素，此时虽创建，但不显示。
            myid$("box").appendChild(dvObj);//插入到html中
            dvObj.id = "dv";//设置Id
            dvObj.className = "div";//绑定样式 
            //遍历生成p标签
            for (let i = 0; i < linObj.length; i++) {
                var pObj = document.createElement("p");
                dvObj.appendChild(pObj);
                pObj.innerText = linObj[i];
                pObj.className = "p";//绑定样式
                //注册点击事件
                pObj.onclick = function(){
                    myid$("txt").value = this.innerText;//设置文本框的value
                    myid$("box").removeChild(myid$("dv"));//同时移除div
                }
            } 
        }
            
    </script>
</body>
</html>

说明：commom.js文件是封装的方法，见代码如下：

    function myid$(myid){
         var id=myid;
     return document.getElementById(id);
    }

谢谢浏览，如有不清楚，或者建议欢迎留言！