• 售前

  • 售后

热门帖子
入门百科

jquery插件实现搜索历史

[复制链接]
折失的誓言群 显示全部楼层 发表于 2021-10-26 13:39:26 |阅读模式 打印 上一主题 下一主题
天天一个jquery插件-做搜刮历史,供各人参考,详细内容如下
结果如下

代码部分
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.   <meta charset="utf-8">
  5.   <title>做搜索历史</title>
  6.   <script src="js/jquery-3.4.1.min.js"></script>
  7.   <style>
  8.    *{
  9.     margin: 0px;
  10.     padding: 0px;
  11.    }
  12.    #searchbox{
  13.     /* border: 1px solid lightgray; */
  14.     height: 40px;
  15.     width: 720px;
  16.     position: relative;
  17.    }
  18.    #searchinput{
  19.     border: 1px solid lightgray;
  20.     border-radius: 5px 0px 0px 5px;
  21.     height: 28px;
  22.     position: absolute;
  23.     right: 45px;
  24.     top: 5px;
  25.     left: 5px;
  26.     width: 670px;
  27.     outline: none;
  28.     text-indent: 12px;
  29.     font-size: 12px;
  30.     color: gray;
  31.    }
  32.    #searchinput:focus{
  33.     border-color: rgb(252,25,68);
  34.    }
  35.    #searchinput:focus~#morebox{
  36.     display:flex;
  37.    }
  38.    #searchbtn{
  39.     height: 30px;
  40.     width: 40px;
  41.     border: none;
  42.     border-radius: 0px 5px 5px 0px;
  43.     background-color: rgb(252,25,68);
  44.     position: absolute;
  45.     right: 5px;
  46.     top: 5px;
  47.     display: flex;
  48.     justify-content: center;
  49.     align-items: center;
  50.     cursor: pointer;
  51.    }
  52.    #searchbtn img{
  53.     width: 25px;
  54.     height: 25px;
  55.    }
  56.    #morebox{
  57.     border: 1px solid lightgray;
  58.     position: absolute;
  59.     top: 40px;
  60.     left: 5px;
  61.     right: 5px;
  62.     height: 370px;
  63.     z-index: 7;
  64.     border-radius: 2px;
  65.     display: flex;
  66.     display: none;
  67.    }
  68.    #push{
  69.     flex: 1;
  70.     /* border: 1px solid lightgray; */
  71.     position: relative;
  72.    }
  73.    #history{
  74.     /* display: none; */
  75.     flex: 1;
  76.     /* border: 1px solid lightgray; */
  77.     position: relative;
  78.    }
  79.    .head{
  80.     position: absolute;
  81.     top: 0px;
  82.     width: 100%;
  83.     height: 30px;
  84.     border-bottom: 1px solid lightgray;
  85.     font-size: 12px;
  86.     display: flex;
  87.     align-items: center;
  88.     text-indent: 12px;
  89.     color: rgb(252,85,49);
  90.    }
  91.    .main{
  92.     position: absolute;
  93.     top: 30px;
  94.     width: 100%;
  95.     bottom: 0px;
  96.     overflow-x:hidden;
  97.     overflow-y: auto;
  98.    }
  99.    .item{
  100.     font-size: 12px;
  101.     height: 30px;
  102.     display: flex;
  103.     align-items: center;
  104.     text-indent: 12px;
  105.     cursor: pointer;
  106.    }
  107.    .item:hover{
  108.     background-color: lightgray;
  109.    }
  110.   </style>
  111. </head>
  112. <body>
  113.   <div id="searchbox">
  114.    <input id="searchinput" placeholder="c一下" />
  115.    <button id="searchbtn"><img src="img/sc.png"></button>
  116.    <div id="morebox">
  117.     <div id="history">
  118.      <div class="head">搜索历史</div>
  119.      <div class="main"></div>
  120.     </div>
  121.     <div id="push">
  122.      <div class="head">热门推荐</div>
  123.      <div class="main">
  124.       <div class="item">微软终于对JDK下手了</div>
  125.       <div class="item">小米隔空充电技术</div>
  126.       <div class="item">Linux常用命令大全</div>
  127.       <div class="item">阿飞超努力又水文了</div>
  128.       <div class="item">每天学一个jquery插件竟然没有插件!究竟是道德的沦丧,还是人性的扭曲</div>
  129.      </div>
  130.     </div>
  131.    </div>
  132.   </div>
  133. </body>
  134. </html>
  135. <script>
  136. $(document).ready(function(){
  137.   //每次点击搜索就假如缓存之中
  138.   //
  139.   $(".item").click(function(){
  140.    var str = $(this).text();
  141.    $("#searchinput").val(str)
  142.   })
  143.    // localStorage["history"] = '[]'//清除一下缓存;
  144.   drawhistory();
  145.   $("#searchbtn").click(function(){
  146.    var str = $("#searchinput").val();
  147.    if(str&&str!=""){
  148.     var arr = getSession();
  149.     arr.push(str);
  150.     localStorage["history"] = JSON.stringify(arr);
  151.     drawhistory();
  152.    }
  153.   })
  154.   getSession();
  155.   //根据缓存找到历史,然后生成搜索历史
  156.   function drawhistory(){
  157.    var arr = getSession();
  158.    $("#history .main .item").remove();
  159.    arr.forEach(item=>{
  160.     var $item = $("<div class='item'>"+item+"</div>");
  161.     $item.appendTo($("#history .main"));
  162.    })
  163.   }
  164.   //获得缓存
  165.   function getSession(){
  166.    var ses = localStorage["history"];
  167.    var arr = ses==undefined?[]:JSON.parse(ses);
  168.    return arr;
  169.   }
  170. })
  171. </script>
复制代码
思绪表明

1、结构是个硬伤,我也不知道我这个结构是不是最符合的,不过看着没弊端
2、然后历史部分就是存到localStorage内里,在符合的动作的地方处理成对应的结果放回dom内里

以上就是本文的全部内容,渴望对各人的学习有所资助,也渴望各人多多支持脚本之家。

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?立即注册

x

帖子地址: 

回复

使用道具 举报

分享
推广
火星云矿 | 预约S19Pro,享500抵1000!
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

草根技术分享(草根吧)是全球知名中文IT技术交流平台,创建于2021年,包含原创博客、精品问答、职业培训、技术社区、资源下载等产品服务,提供原创、优质、完整内容的专业IT技术开发社区。
  • 官方手机版

  • 微信公众号

  • 商务合作