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插件FusionCharts实现的3D帕累托图效果示例【附demo源码】
Mar 25 jQuery
JQuery和html+css实现带小圆点和左右按钮的轮播图实例
Jul 22 jQuery
jquery在vue脚手架中的使用方式示例
Aug 29 jQuery
关于jQuery里prev()的简单操作代码
Oct 27 jQuery
jQuery.Sumoselect插件实现下拉复选框效果
Nov 09 jQuery
jQuery第一次运行页面默认触发点击事件的实例
Jan 10 jQuery
jQuery实现的简单图片轮播效果完整示例
Feb 08 jQuery
jQuery中的$是什么意思及 $. 和 $().的区别
Apr 20 jQuery
jQuery实现点击旋转,再点击恢复初始状态动画效果示例
Dec 11 jQuery
javascript异步处理与Jquery deferred对象用法总结
Jun 04 jQuery
jquery 时间戳转日期过程详解
Oct 12 jQuery
jQuery 隐藏/显示效果函数用法实例分析
May 20 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
支持数组的ADDSLASHES的php函数
2010/02/16 PHP
Php Ctemplate引擎开发相关内容
2012/03/03 PHP
使用Zttp简化Guzzle 调用
2017/07/02 PHP
thinkPHP微信分享接口JSSDK用法实例
2017/07/07 PHP
浅谈PHP发送HTTP请求的几种方式
2017/07/25 PHP
PHP如何使用cURL实现Get和Post请求
2020/07/11 PHP
ASP.NET MVC中EasyUI的datagrid跨域调用实现代码
2012/03/14 Javascript
Jquery插件写法笔记整理
2012/09/06 Javascript
JS 实现图片直接下载示例代码
2013/07/22 Javascript
ExtJS4中使用mixins实现多继承示例
2013/12/03 Javascript
类似php的js数组的in_array函数自定义方法
2013/12/27 Javascript
JavaScript模块随意拖动示例代码
2014/05/27 Javascript
node.js中的buffer.toString方法使用说明
2014/12/14 Javascript
jQuery中事件与动画的总结分享
2016/05/24 Javascript
jquery简单插件制作(fn.extend)完整实例
2016/05/24 Javascript
jQuery 调用WebService 实例讲解
2016/06/28 Javascript
jquery+css实现下拉列表功能
2017/09/03 jQuery
Javascript中弹窗confirm与prompt的区别
2018/10/26 Javascript
vue实现的上拉加载更多数据/分页功能示例
2019/05/25 Javascript
前端Vue项目详解--初始化及导航栏
2019/06/24 Javascript
微信小程序设置滚动条过程详解
2019/07/25 Javascript
Node.JS发送http请求批量检查文件中的网页地址、服务是否有效可用
2019/11/20 Javascript
[52:29]DOTA2上海特级锦标赛主赛事日 - 2 胜者组第一轮#3Secret VS OG第三局
2016/03/03 DOTA
[02:12]Dota 2 推出全新英雄—— 电炎绝手
2019/08/23 DOTA
Python实现的数据结构与算法之链表详解
2015/04/22 Python
Python获取邮件地址的方法
2015/07/10 Python
Python的包管理器pip更换软件源的方法详解
2016/06/20 Python
Python脚本导出为exe程序的方法
2020/03/25 Python
通过python 执行 nohup 不生效的解决
2020/04/16 Python
推荐10个CSS3 制作的创意下拉菜单效果
2014/02/11 HTML / CSS
会计实习生工作总结的自我评价
2013/10/07 职场文书
《蓝色的树叶》教学反思
2014/02/24 职场文书
财务总监管理岗位职责
2014/03/08 职场文书
第一军规观后感
2015/06/12 职场文书
2016大一新生军训心得体会
2016/01/11 职场文书
Java 死锁解决方案
2022/05/11 Java/Android