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里面

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 基于jQuery实现搜索关键字自动匹配功能

    基于jQuery实现搜索关键字自动匹配功能

    今天我们就一起来看一个简单的基于jquery的关键字自动匹配的例子,希望文章能够对各位有帮助. 例子一 在项目中,有时候需要用户选择城市,但是城市太多,用户选择起来不太方便,所以提供了一个用户可以通过输入框输入城市的汉字或者拼音简写.结果示意图如下: 当输入拼音后结果示意图如下: 实现代码如下: <html><head><title>实时查询城市通过姓名或拼音简写</title></head><meta charset = "ut

  • 基于jquery的仿百度搜索框效果代码

    基于jquery的仿百度搜索框效果代码

    先看看整个的效果图:图一: 图二: 图三: 图四: 大概的效果图就这样,接下来直接看源码页面: 复制代码 代码如下: <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="autoSearch._Default" %> <!DOCTYPE html PUBLIC "-//W3C//DT

  • jquery插件实现搜索历史

    jquery插件实现搜索历史

    每天一个jquery插件-做搜索历史,供大家参考,具体内容如下 效果如下 代码部分 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>做搜索历史</title> <script src="js/jquery-3.4.1.min.js"></script> <style> *{ margin:

  • jQuery插件select2利用ajax高效查询大数据列表（可搜索、可分页）

    jQuery插件select2利用ajax高效查询大数据列表（可搜索、可分页）

    select2是一款jQuery插件,是普通form表单select组件的升级版. 可以定制搜索.远程数据集(Remote data,本篇主要介绍点).无限滚动(数据分页功能,这一点很妙).还有很多高端的参数设置(有需要的下次介绍). 内置了40种国际化语言,不过这里我们只需要用到中文. 同时支持现代和传统浏览器内置,甚至包括惹人不高兴的IE8. 那么,现在让我们开始一段select2的奇幻之旅吧! 一.惊艳的效果,来一睹为快吧 本地实战结果 二.导入css和js到网站上 1.使用CDN,节省自

  • jQuery插件artDialog.js使用与关闭方法示例

    本文实例讲述了jQuery插件artDialog.js使用与关闭方法.分享给大家供大家参考,具体如下: 子窗口关闭artdialog终极解决方案: window.parent.window.art.dialog({ id: 'qin123' }).close(); <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-t

  • jquery.lazyload 实现图片延迟加载jquery插件

    什么是ImageLazyLoad技术 在页面上图片比较多的时候,打开一张页面必然引起与服务器大数据量的交互.尤其是对于高清晰的图片,占的几M的空间.ImageLazyLoad技术就是,当前可见界面的图片是加载进来的,而不可见页面(通过滚动条下拉可见)中的图片是不加载的,这样势必会引起速度上质的提升. 怎么实现ImageLazyLoad 一.使用JQuery插件 ,插件名: jquery.lazyload(7kb大小),压缩后(3kb大小) 在线压缩js http://closure-compil

  • 强烈推荐240多个jQuery插件提供下载

    强烈推荐240多个jQuery插件提供下载

    jQuery 是一个快速的,简洁的 javaScript 库,使用户能更方便地处理 HTML documents.events.实现动画效果,并且方便地为网站提供 AJAX 交互. jQuery 还有一个比较大的优势是,它的文档说明很全,而且各种应用也说得很详细,同时还有许多成熟的插件可供选择. jQuery 能够使用户的 html 页保持代码和 html 内容分离,也就是说,不用再在 html 里面插入一堆js来调用命令了,只需定义 id 即可.今天在Kollermedia.at上发现了一篇J

  • 40款非常棒的jQuery 插件和制作教程（系列一）

    40款非常棒的jQuery 插件和制作教程（系列一）

    本文向大家分享40个实用的 jQuery 插件以及制作教程. Parallax Slider with jQuery ( 演示| 下载 ) 带立体效果的 jQuery 幻灯片插件,很酷! Merging Image Boxes with jQuery ( 演示| 下载 ) 非常酷的带消融效果的 jQuery 相册插件,太靓了! Sweet Thumbnails Preview Gallery ( 演示| 下载 ) 带缩略图预览效果的 jQuery 相册插件 Portfolio Zoom Slid

  • 最新最热最实用的15个jQuery插件汇总

    最新最热最实用的15个jQuery插件汇总

    Hello,一个激动人心的好消息,现在我为大家整理最近7月发布的jQuery插件. 如果你熟悉任何下面列出的插件,请分享你的反馈与我们的读者,或如果你知道哪一个我们没有收录,那么请与我们分享在下面的评论部分. 我们希望你会发现这个列表下面这个列表对您很有用. 1. 固定表头 固定表头是一个jQuery塞进任何有效的表创建固定表头表标记了. 2. Stackgrid.adem.js stackgrid.adem.js 是一个非常快速和简单的JavaScript插件,帮助你创建一个动态级联网格 3.

  • 经典海量jQuery插件 大家可以收藏一下

    其中有些已经无法访问,或许是文件移除,或许是被封锁.大家分享的东西,没什么特别的可说的,唯有感谢无私分享的人们.提醒大家在使用的时候注意jQuery包的版本问题,最好是使用相同的版本,因为使用了高版本很有可能出现或多或少的问题.并且其中英文插件在转换成中文时注意编码,推荐utf-8.jQuery插件-文件上传(File upload)Ajax File Upload.jQUploader.Multiple File Upload plugin.jQuery File Style.Styling

  • 使用jquery插件实现图片延迟加载技术详细说明

    这里推荐使用jquery图片延迟加载插件jquery.lazyload实现图片延迟加载提高网站打开速度下载地址:http://www.appelsiini.net/download/jquery.lazyload.js 一.快速使用篇 1.导入JS插件 复制代码 代码如下: <script src="js\jquery.js" type="text/javascript"></script> <script src="js\j

  • jQuery插件实现可输入和自动匹配的下拉框

    实现可输入+带自动匹配功能的下拉框,我试过以下几种方法: 1.直接使用h5的新标签<datalist>,对应demo如下: <input list="browsers"> <datalist id="browsers"> <option value="Internet Explorer"> <option value="Firefox"> <option val

随机推荐