jquery插件实现搜索历史


Posted in jQuery onApril 24, 2021

每天一个jquery插件-做搜索历史,供大家参考,具体内容如下

效果如下

jquery插件实现搜索历史

代码部分

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>做搜索历史</title>
  <script src="js/jquery-3.4.1.min.js"></script>
  <style>
   *{
    margin: 0px;
    padding: 0px;
   }
   #searchbox{
    /* border: 1px solid lightgray; */
    height: 40px;
    width: 720px;
    position: relative;
   }
   #searchinput{
    border: 1px solid lightgray;
    border-radius: 5px 0px 0px 5px;
    height: 28px;
    position: absolute;
    right: 45px;
    top: 5px;
    left: 5px;
    width: 670px;
    outline: none;
    text-indent: 12px;
    font-size: 12px;
    color: gray;
   }
   #searchinput:focus{
    border-color: rgb(252,25,68);
   }
   #searchinput:focus~#morebox{
    display:flex;
   }
   #searchbtn{
    height: 30px;
    width: 40px;
    border: none;
    border-radius: 0px 5px 5px 0px;
    background-color: rgb(252,25,68);
    position: absolute;
    right: 5px;
    top: 5px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
   }
   #searchbtn img{
    width: 25px;
    height: 25px;
   }
   #morebox{
    border: 1px solid lightgray;
    position: absolute;
    top: 40px;
    left: 5px;
    right: 5px;
    height: 370px;
    z-index: 7;
    border-radius: 2px;
    display: flex;
    display: none;
   }
   #push{
    flex: 1;
    /* border: 1px solid lightgray; */
    position: relative;
   }
   #history{
    /* display: none; */
    flex: 1;
    /* border: 1px solid lightgray; */
    position: relative;
   }
   .head{
    position: absolute;
    top: 0px;
    width: 100%;
    height: 30px;
    border-bottom: 1px solid lightgray;
    font-size: 12px;
    display: flex;
    align-items: center;
    text-indent: 12px;
    color: rgb(252,85,49);
   }
   .main{
    position: absolute;
    top: 30px;
    width: 100%;
    bottom: 0px;
    overflow-x:hidden;
    overflow-y: auto;
   }
   .item{
    font-size: 12px;
    height: 30px;
    display: flex;
    align-items: center;
    text-indent: 12px;
    cursor: pointer;
   }
   .item:hover{
    background-color: lightgray;
   }
  </style>
 </head>
 <body>
  <div id="searchbox">
   <input id="searchinput" placeholder="c一下" />
   <button id="searchbtn"><img src="img/sc.png"></button>
   <div id="morebox">
    <div id="history">
     <div class="head">搜索历史</div>
     <div class="main"></div>
    </div>
    <div id="push">
     <div class="head">热门推荐</div>
     <div class="main">
      <div class="item">微软终于对JDK下手了</div>
      <div class="item">小米隔空充电技术</div>
      <div class="item">Linux常用命令大全</div>
      <div class="item">阿飞超努力又水文了</div>
      <div class="item">每天学一个jquery插件竟然没有插件!究竟是道德的沦丧,还是人性的扭曲</div>
     </div>
    </div>
   </div>
  </div>
 </body>
</html>
<script>
 $(document).ready(function(){
  //每次点击搜索就假如缓存之中
  //
  $(".item").click(function(){
   var str = $(this).text();
   $("#searchinput").val(str)
  })
   // localStorage["history"] = '[]'//清除一下缓存;
  drawhistory();
  $("#searchbtn").click(function(){
   var str = $("#searchinput").val();
   if(str&&str!=""){
    var arr = getSession();
    arr.push(str);
    localStorage["history"] = JSON.stringify(arr);
    drawhistory();
   }
  })
  getSession();
  //根据缓存找到历史,然后生成搜索历史
  function drawhistory(){
   var arr = getSession();
   $("#history .main .item").remove();
   arr.forEach(item=>{
    var $item = $("<div class='item'>"+item+"</div>");
    $item.appendTo($("#history .main"));
   })
  }
  //获得缓存
  function getSession(){
   var ses = localStorage["history"];
   var arr = ses==undefined?[]:JSON.parse(ses);
   return arr;
  }
 })
</script>

思路解释

1、布局是个硬伤,我也不知道我这个布局是不是最合适的,不过看着没毛病
2、然后历史部分就是存到localStorage里面,在合适的动作的地方处理成对应的效果放回dom里面

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

jQuery 相关文章推荐
利用jquery正则表达式在页面验证url网址输入是否正确
Apr 04 jQuery
详谈jQuery中使用attr(), prop(), val()获取value的异同
Apr 25 jQuery
JQuery EasyUI 结合ztrIee的后台页面开发实例
Sep 01 jQuery
JS和jQuery通过this获取html标签中的属性值(实例代码)
Sep 11 jQuery
React中jquery引用的实现方法
Sep 12 jQuery
jQuery实现切换隐藏与显示同时切换图标功能
Oct 29 jQuery
jQuery实现的下雪动画效果示例【附源码下载】
Feb 02 jQuery
jQuery实现判断上传图片类型和大小的方法示例
Apr 11 jQuery
jQuery中ajax请求后台返回json数据并渲染HTML的方法
Aug 08 jQuery
使用jquery模拟a标签的click事件无法实现跳转的解决
Dec 04 jQuery
jQuery实现的网站banner图片无缝轮播效果完整实例
Jan 28 jQuery
解决jquery validate 验证不通过后验证正确的信息仍残留在label上的方法
Aug 27 jQuery
jquery插件实现图片悬浮
jQuery实现影院选座订座效果
jQuery class属性操作addClass()与removeClass()、hasClass()、toggleClass()
jQuery treeview树形结构应用
Mar 24 #jQuery
jQuery实现鼠标拖动图片功能
Mar 04 #jQuery
ajax jquery实现页面某一个div的刷新效果
Mar 04 #jQuery
jquery实现广告上下滚动效果
Mar 04 #jQuery
You might like
php实现多维数组中每个单元值(数字)翻倍的方法
2015/02/16 PHP
php计划任务之验证是否有多个进程调用同一个job的方法
2015/12/07 PHP
PHP实现的多进程控制demo示例
2019/07/22 PHP
使用js对select动态添加和删除OPTION示例代码
2013/08/12 Javascript
jQuery事件之键盘事件(ctrl+Enter回车键提交表单等)
2014/05/11 Javascript
20条学习javascript的编程规范的建议
2014/11/28 Javascript
Web表单提交之disabled问题js解决方法
2015/01/13 Javascript
jquery实现像栅栏一样左右滑出式二级菜单效果代码
2015/08/24 Javascript
jfinal与bootstrap的登录跳转实战演习
2015/09/22 Javascript
Vue.js实现一个自定义分页组件vue-paginaiton
2016/09/05 Javascript
JavaScript中关于iframe滚动条的去除和保留
2016/11/17 Javascript
Bootstrap源码解读模态弹出框(11)
2016/12/28 Javascript
在vue中实现简单页面逆传值的方法
2017/11/27 Javascript
ES6 迭代器(Iterator)和 for.of循环使用方法学习(总结)
2018/02/08 Javascript
基于Vue实现微信小程序的图文编辑器
2018/07/25 Javascript
JS+CSS3实现的简易钟表效果示例
2019/04/13 Javascript
使用JavaScrip模拟实现仿京东搜索框功能
2019/10/16 Javascript
vue项目中定义全局变量、函数的几种方法
2019/11/08 Javascript
vue 移动端记录页面浏览位置的方法
2020/03/11 Javascript
全面解析JavaScript Module模式
2020/07/24 Javascript
JS的时间格式化和时间戳转换函数示例详解
2020/07/27 Javascript
Vant 在vue-cli 4.x中按需加载操作
2020/11/05 Javascript
[00:56]2014DOTA2国际邀请赛 DK、iG 赛前探访
2014/07/10 DOTA
[05:13]2018DOTA2亚洲邀请赛主赛事第二日战况回顾 LGD、VG双雄携手晋级
2018/04/05 DOTA
Python中用字符串调用函数或方法示例代码
2017/08/04 Python
python利用dir函数查看类中所有成员函数示例代码
2017/09/08 Python
python获取当前目录路径和上级路径的实例
2018/04/26 Python
Python importlib动态导入模块实现代码
2020/04/16 Python
python和JavaScript哪个容易上手
2020/06/23 Python
python中如何使用虚拟环境
2020/10/14 Python
莫斯科高科技在线商店:KremlinStore
2019/03/13 全球购物
一份比较全的PHP面试题
2016/07/29 面试题
Static Nested Class 和 Inner Class的不同
2013/11/28 面试题
2015七夕情人节宣传语
2015/07/14 职场文书
六年级情感作文之500字
2019/10/23 职场文书
PostgreSQL解析URL的方法
2021/08/02 PostgreSQL