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

78 阅读 0 评论 52 点赞

我是靠谱客的博主想人陪板栗，最近开发中收集的这篇文章主要介绍仿百度搜索关键字弹出符合条件的内容，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

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

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

<!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>