模仿百度搜索框缓存数据，页面效果比较简陋

最新推荐文章于 2022-04-11 17:40:48 发布

五只小狗

最新推荐文章于 2022-04-11 17:40:48 发布

阅读量143

点赞数

分类专栏： web开发 html js 文章标签： javascript

本文链接：https://blog.csdn.net/qq_43898141/article/details/109249829

版权

web开发同时被 3 个专栏收录

25 篇文章 0 订阅

订阅专栏

html

15 篇文章 0 订阅

订阅专栏

11 篇文章 0 订阅

订阅专栏

直接上代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		
		                
		                    <div style="width: 50%;height: 50%;margin: 0 auto;">
		                       客户公司 : <input lay-verify="required|title" type="text" id="ocomname" name="ocomname"
		                               placeholder="输入客户公司"  list="listadd" style="width: 100%;height: 50%;margin: 0 auto;">
		                        <datalist id="listadd">
		                           <option></option>
		
		                        </datalist>
		
		                    </div>
		<script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
		
		<script>
			//当鼠标点击文本框启动 判断localStorage中是否存在数据，如果有将他遍历添加在<datalist>中
			  $('#ocomname').focus(function () {
			      //每一次点击清空<datalist>数据
			      $("#listadd").empty();
					
			        if(localStorage.length != 0){//缓存长度不等于0有数据
			              var name = localStorage.getItem("name");//获取
			              var arr = name.split(',');//将字符串已逗号拆分为数组
			              var str = '';
			              for(var i=0;i<10;i++){//遍历数据
			                  if(arr[i]!=''&&arr[i]!=undefined){
			                      str+='<option>'+arr[i]+'<option/>';
			                  }					
			              }
			              $("#listadd").append(str);//添加
					
			        }
					
			  })
			   //鼠标离开更新缓存数据
			  $('#ocomname').blur(function () {//鼠标离开文本框执行
			      var ocomname = $("#ocomname").val();//获取数据
			      if(localStorage.length!=0){//不等于0证明有数据
			             var str = localStorage.getItem('name');
			             var arr = str.split(',');
			             var arrstr = '';
					
			                 arrstr+= ocomname+",";//首先添加最新的
			                 for(var i=0;i<=arr.length;i++){
			                     if(arr[i]!='' && arr[i]!=ocomname&&arr[i]!=''&&arr[i]!=undefined){
			                         arrstr+= arr[i]+',';
			                     }
			                 }
			                localStorage.setItem("name",arrstr);
					
			      }else{//等于空直接添加用户新写的
			          localStorage.setItem("name",ocomname);
			      }
					
			  })
			  //模糊查询
			  $('#ocomname').keyup(function () {
			      $("#listadd").empty();//删除<option>中的数据
			      var ocomname = $("#ocomname").val();//获取数据
			      if(ocomname == ''){
			          return;
			      }
			      var str = localStorage.getItem("name");//获取缓存中的数据
			      var arr = str.split(",");
			      var shu = 0;
			      for(var i=0;i<=arr.length;i++){
			          if(arr[i]!=''&&arr[i]!=undefined){
			              if(arr[i].indexOf(ocomname) !=-1){
			                  shu++;
			                  $("#listadd").append('<option>'+arr[i]+'</option>');
			              }
			              if(shu>=10){
			                  return;
			              }
			          }
					
			      }
					
			  })
		</script>
		   
	</body>
</html>

实现的效果html很简陋在这里插入图片描述关于localStorage的一些方法介绍和使用下面这篇文章写的很详细
点击查看localStorage方法介绍

五只小狗

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
模仿百度搜索框缓存数据，页面效果比较简陋

直接上代码<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> </head> <body> <div style="width: 50%;height: 50%;margin: 0 auto;">
复制链接

扫一扫