模拟百度搜索

最新推荐文章于 2023-07-14 02:29:14 发布

weixin_43815756

最新推荐文章于 2023-07-14 02:29:14 发布

阅读量434

点赞数

分类专栏： web前端文章标签： js模拟百度搜索框

本文链接：https://blog.csdn.net/weixin_43815756/article/details/90450391

版权

web前端专栏收录该内容

14 篇文章 0 订阅

订阅专栏

最近学习了一个百度搜索框的案例，想记录下来，下面来说说具体功能如何实现
需求：
1.当在输入框输入时，每输入一个字，就会在下方展示相关内容列表
2.每一次输入框输入，清空上一次输入内容
3.鼠标移入列表内容时，对应的内容高亮显示，移出时回复原装
4.鼠标点击内容时，将列表内容显示到文本框，清空列表

HTML页面结构和CSS样式部分代码，有点简陋。。。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body{
            padding-top: 100px;
            text-align: center;
        }
    </style>
</head>
<body>
<input type="text" id="txt">
<button id="btn">百度一下</button>
<div id="box"></div>

下面是js代码

<script>
//1.首先，准备数据
var keyWords=["打篮球","打游戏","听歌","看电影"];
//2.给文本框注册抬起事件
 my$("txt").onkeyup=function () {
        var text=this.value;
        //存放能对应的数据
        var arr=[];
        //优化：每次键盘抬起判断页面中有没有div
        if(my$("dv")){
            my$("box").removeChild(my$("dv"));
        }
        //通过循环判断值是不是最开始出现的，是就存放到临时数组里面去
         for(var i=0;i<keyWords.length;i++){
            if(keyWords[i].indexOf(text)==0){
                arr.push(keyWords[i]);
            }
        }
        //优化：如果临时数组为空，文本框也为空，不需要创建div
         if(text.length==0||arr.length==0){
            //判断是否存在
            if(my$("dv")){
                my$("box").removeChild(my$("dv"));
            }
            return;
        }
 //3.把对应的数据显示到页面
  var box=document.createElement("div");
        console.log(box);
        box.id="dv";
        my$("box").appendChild(box);
        box.style.width="175px";
        box.style.textAlign="center";
        box.style.marginLeft="550px";
        box.style.border="1px solid green";
        box.style.cursor="pointer";
        for(var i=0;i<arr.length;i++){
            var pObj=document.createElement("p");
            box.appendChild(pObj);
            pObj.innerText=arr[i];
		//鼠标移入移出高亮显示
		    //鼠标移入
		  pObj.onmouseover=function () {
                this.style.backgroundColor="pink";
            }
            //鼠标移出
            pObj.onmouseout=function () {
                this.style.backgroundColor="";
            }
//4.鼠标点击内容时，将列表内容显示到文本框，清空列表
pObj.onclick=function () {
                my$("txt").value=this.innerText;
                my$("box").removeChild(my$("dv"));
            }
</script>

效果图
在这里插入图片描述

weixin_43815756

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
模拟百度搜索

最近学习了一个百度搜索框的案例，想记录下来，下面来说说具体功能如何实现需求：1.当在输入框输入时，每输入一个字，就会在下方展示相关内容列表2.每一次输入框输入，清空上一次输入内容3.鼠标移入列表内容时，对应的内容高亮显示，移出时回复原装4.鼠标点击内容时，将列表内容显示到文本框，清空列表HTML页面结构和CSS样式部分代码，有点简陋。。。<!DOCTYPE html>&...
复制链接

扫一扫