仿百度搜索关键字弹出符合条件的内容

最新推荐文章于 2022-01-04 11:56:41 发布

王小玖

最新推荐文章于 2022-01-04 11:56:41 发布

阅读量324

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/weixin_46019220/article/details/103775205

版权

仿百度搜索关键字弹出符合条件的内容

在百度等网站搜索时，输入一个字，系统会弹出包含该关键字的一些搜索词。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div class="box">
    <input type="text" id="inp">
    <input type="button" value="百度一下">
    <ul id="ul"></ul>
</div>
<script src="JavaScript/JavaScript.js"></script>
<script>
    var list=["吃火锅","吃火锅","火锅","吃123"];
    // 键盘抬起事件
    $myid("inp").onkeyup=function () {
        console.log(this.value);
        // 优化3：删除之前列表，显示新的列表
        $myid("ul").innerHTML="";
    //    1、根据关键字显示搜索列表的关键字
        var newList=[];
        var keyWord=this.value;
        for (var i =0;i<list.length;i++){
            //找包含关键字的
            /*if (list[i].indexOf(keyWord)!==-1) {

            }*/
            //找以关键字开头
            if (list[i].indexOf(keyWord)===0){
                newList.push(list[i]);
            }
        }
        //优化4:当长度为0时，不显示列表
        if (keyWord.length===0){
            return;
        }
        console.log(newList);
        //2、根据新数组创建列表
        newList.forEach(function (item,i) {
          var liObj = document.createElement("li");
          liObj.innerText=item;
          $myid("ul").appendChild(liObj);
          //鼠标移上去，显示背景颜色
          liObj.onmouseover=function () {
              this.style.backgroundColor="pink";
          };
            //鼠标移下来，背景颜色消失
          liObj.onmouseout=function () {
              this.style.backgroundColor="";
          }
        });
        }
</script>
</body>
</html>