模拟百度搜索框，输入时显示历史记录

Posted 2020-09-02

今天写了个小demo，利用本地存储的特点，模拟百度搜索框。

主要知识是利用本地存储的特点，模拟百度搜索时的历史记录显示。

主要html代码为

 

<div class="search">
    <input type="text"/>
    <button class="btn">搜索</button>
</div>
<ul class="hidden">
    <li></li>
</ul>

 

CSS代码为：

 1   .search{
 2             margin:30px 80px;
 3             position: relative;
 4 
 5         }
 6         .search input{
 7             position: absolute;
 8             top:0;
 9             left:0;
10             width: 300px;
11             height:35px;
12             outline:none;
13             border:1px solid #979797;
14             text-indent: 10px;
15         }
16         .search .btn{
17             position: absolute;
18             top:0;
19             left:301px;
20             width:80px;
21             height:37px;
22             border:1px solid #979797;
23             background:linear-gradient(to bottom ,#f9f9f9, #ededed);
24             font-size:16px;
25             outline: none;
26 
27         }
28         ul{
29             width: 381px;
30             border:1px solid  #979797;
31             position: absolute;
32             top: 66px;
33             left:80px;
35             box-sizing: border-box;
36         }
37         ul li{
38             line-height: 30px;
39             color:#7a77c8;
40             cursor: pointer;
41             padding:0 10px;
42             box-sizing: border-box;
43         }
44         ul li:hover{
45             background:#7a77c8;
46             color:white;
47         }
48         .hidden{
49             display: none;
50         }
51         .show{
52             display: block;
53         }

javascript部分及注释为：

 1   <!-- 获取本地数据-->
 2 
 3 //    var data=localStorage.getItem(‘search‘);
 4 //    console.log(data);
 5 
 6 //    获取表单元素
 7       var text=document.getElementsByTagName(‘input‘)[0];
 8 
 9     //获取用来显示历史记录的列表框
10      var hidden=document.getElementsByTagName(‘ul‘)[0];
11 
12 //    获取搜索按钮
13     var btn=document.getElementsByClassName(‘btn‘)[0];
14 
15 
16 
17     // 从本地存储中获取本地数据
18     var data=localStorage.getItem(‘search‘);
19 //将数据转换为数组格式
20     data=data?JSON.parse(data):[];
21 
22 
23 //     当键盘按键释放时触发事件
24 
25      text.onkeyup= function () {
26 
27          // 获取输入的数据
28          var txt=text.value;
29 
30 //         初始化一个变量用来承载查找到的数据
31          var html=‘‘;
32 
33          for(var i=0;i<data.length;i++){
34              var reg=new RegExp(txt);  //只有用构造函数方式才能传递参数
35 
36              var index= data[i].search(reg); //在本地数据中查找是否含有输入的内容
37 
38 //            如果有，则将数据放到变量中
39              if(index!=-1){
40                 html+=‘ <li>‘+data[i]+‘</li>‘;
41 
42             }
43          }
44 
45 //          将最后得到的所有数据添加到要展示的列表框中
46          hidden.innerHTML=html;
47 //      显示列表框
48          hidden.className=‘ show‘;
49 
50 
51      };
52 
53 //    给搜索框添加单击事件，当事件发生时，将表单中需要搜索的内容添加到本地存储起来，
54     btn.onclick= function () {
55 
56         var txt=text.value;
57 
58 //        先判断本地是否存在，不存在添加，
59         if(data.indexOf(txt)==-1){
60 
61             data.push(txt);
62         }
63 
64 //        更新本地存储的数据
65         localStorage.setItem(‘search‘,JSON.stringify(data));
66 
67 //       搜索后 将表单内容置空，将选择框隐藏
68         text.value=‘‘;
69         hidden.className=‘hidden‘;
70 
71        location.href=‘https://www.baidu.com/s?word=‘+txt;
72 
73     };
74 
75 
76 //    给历史展示框添加单击事件，利用事件委托
77 //    将点击的历史展示框中 的内容添加到搜索栏中，
78     hidden.onclick= function (e) {
79 
80         var li= e.target;
81 
82         var title=li.innerHTML;
83 
84         console.log(title);
85 
86         text.value=title;
87 
88     }

 

刚刚学习了本地存储，利用它的特点写个小demo。

方便与喜欢前端的小伙伴互相学习。如果有觉得不太好的地方，欢迎提出。

最后，生命不息，奋斗不止！