jquery插件實(shí)現(xiàn)搜索歷史
更新時(shí)間：2021年04月23日 16:31:43 作者：阿飛超努力
這篇文章主要為大家詳細(xì)介紹了jquery插件實(shí)現(xiàn)搜索歷史，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
每天一個(gè)jquery插件-做搜索歷史，供大家參考，具體內(nèi)容如下
效果如下
代碼部分
<!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">熱門(mén)推薦</div>
<div class="main">
<div class="item">微軟終于對(duì)JDK下手了</div>
<div class="item">小米隔空充電技術(shù)</div>
<div class="item">Linux常用命令大全</div>
<div class="item">阿飛超努力又水文了</div>
<div class="item">每天學(xué)一個(gè)jquery插件竟然沒(méi)有插件！究竟是道德的淪喪，還是人性的扭曲</div>
</div>
</div>
</div>
</div>
</body>
</html>
<script>
$(document).ready(function(){
//每次點(diǎn)擊搜索就假如緩存之中
//
$(".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();
//根據(jù)緩存找到歷史，然后生成搜索歷史
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、布局是個(gè)硬傷，我也不知道我這個(gè)布局是不是最合適的，不過(guò)看著沒(méi)毛病
2、然后歷史部分就是存到localStorage里面，在合適的動(dòng)作的地方處理成對(duì)應(yīng)的效果放回dom里面
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
如何使用CSS3和JQuery easing 插件制作絢麗菜單
這篇文章主要介紹了如何使用CSS3和JQuery easing 插件制作絢麗菜單，這樣做可以讓有菜單的盒子滑出，并且彈出縮略圖。在某些菜單項(xiàng)中我們還包含著有進(jìn)一步鏈接的子菜單。取決于我們鼠標(biāo)在菜單項(xiàng)上的停懸，子菜單將向左或向右滑動(dòng)。,需要的朋友可以參考下2019-06-06
jquery實(shí)現(xiàn)圖片跟隨鼠標(biāo)的實(shí)例
這篇文章主要介紹了 jquery實(shí)現(xiàn)圖片跟隨鼠標(biāo)的實(shí)例的相關(guān)資料,希望通過(guò)本文能幫助到大家實(shí)現(xiàn)這樣的功能，需要的朋友可以參考下2017-10-10
jquery 操作表格實(shí)現(xiàn)代碼(多種操作打包)
最近做東西需要對(duì)表格進(jìn)行操作，用到的動(dòng)作包括:添加一行數(shù)據(jù)、刪除一行數(shù)據(jù)、上下移動(dòng)數(shù)據(jù)，網(wǎng)上找了很多，但是不能完全滿(mǎn)足我的需求，自己琢磨了下，搞了個(gè)這個(gè)東東2011-03-03
一次$.getJSON不執(zhí)行的簡(jiǎn)單記錄
下面小編就為大家?guī)?lái)一篇一次$.getJSON不執(zhí)行的簡(jiǎn)單記錄。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-07-07
這篇文章主要介紹了jQuery中nextAll()方法用法,實(shí)例分析了nextAll()方法的功能、定義及查找匹配元素之后所有的同輩元素使用技巧,需要的朋友可以參考下2015-01-01
jQuery EasyUI右鍵菜單實(shí)現(xiàn)關(guān)閉標(biāo)簽/選項(xiàng)卡
這篇文章主要介紹了jQuery EasyUI右鍵菜單實(shí)現(xiàn)關(guān)閉標(biāo)簽/選項(xiàng)卡,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-10-10
Datatables 是一款強(qiáng)大的Jquery表格處理插件，樣式方面可以兼容bootstrap3/4、JqueryUi等，也有默認(rèn)的樣式可以選擇。使用Datatables可以很靈活的從服務(wù)端通過(guò)ajax更新表格數(shù)據(jù)，實(shí)現(xiàn)排序、分頁(yè)等功能
2020-01-01 
在網(wǎng)站開(kāi)發(fā)中我們經(jīng)常需要將對(duì)話(huà)框顯示在屏幕的中央。如果使用Javascript因?yàn)闉g覽器實(shí)現(xiàn)的差異，實(shí)現(xiàn)起來(lái)非常麻煩。但是JQuery可以很簡(jiǎn)單實(shí)現(xiàn)的搞定這一切。
2010-02-02 
多種類(lèi)型jQuery網(wǎng)頁(yè)驗(yàn)證碼插件代碼實(shí)例
這篇文章主要介紹了多種類(lèi)型jQuery網(wǎng)頁(yè)驗(yàn)證碼插件代碼實(shí)例，有正好需要的同學(xué)可以測(cè)試研究下具體使用效果
2021-01-01