jQuery plugin to implement search history
|
A jQuery plugin every day - to make search history, for your reference, the specific content is as follows The effect is as follows
Code section
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Do Search History</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">Search History</div>
<div class="main"></div>
</div>
<div id="push">
<div class="head">Hot Recommendations</div>
<div class="main">
<div class="item">Microsoft finally took action against JDK</div>
<div class="item">Xiaomi wireless charging technology</div>
<div class="item">Common Linux commands</div>
<div class="item">A Fei is working hard and is good at writing</div>
<div class="item">Learn a jQuery plugin every day and there are no plugins! Is it the decline of morality or the distortion of human nature?
</div>
</div>
</div>
</div>
</body>
</html>
<script>
$(document).ready(function(){
//Every time you click on the search, it will be in the cache//
$(".item").click(function(){
var str = $(this).text();
$("#searchinput").val(str)
})
// localStorage["history"] = '[]'//Clear the cache;
drawhistory();
$("#searchbtn").click(function(){
var str = $("#searchinput").val();
if(str&&str!=""){
var arr = getSession();
arr.push(str);
localStorage["history"] = JSON.stringify(arr);
drawhistory();
}
})
getSession();
//Find the history based on the cache, and then generate the search history function drawhistory(){
var arr = getSession();
$("#history .main .item").remove();
arr.forEach(item=>{
var $item = $("<div class='item'>"+item+"</div>");
$item.appendTo($("#history .main"));
})
}
//Get cache function getSession(){
var ses = localStorage["history"];
var arr = ses==undefined?[]:JSON.parse(ses);
return arr;
}
})
</script>Explanation of ideas 1. The layout is a flaw. I don’t know if my layout is the most appropriate, but it looks fine. The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM. You may also be interested in:
|
<<: Summary of methods to check whether the port is open in Linux
>>: MySQL 5.6 installation steps with pictures and text
Recommend
Implementation of Nginx filtering access logs of static resource files
Messy log Nginx in daily use is mostly used as bo...
Detailed explanation of the differences between js array find, some, filter, and reduce
Distinguish the differences between the filter, f...
How to migrate sqlite to mysql script
Without further ado, I will post the code for you...
Win10 + Ubuntu20.04 LTS dual system boot interface beautification
Effect display The built-in boot interface is too...
Analysis of product status in interactive design that cannot be ignored in design
In the process of product design, designers always...
Implementation of 2D and 3D transformation in CSS3
CSS3 implements 2D plane transformation and visua...
Detailed explanation of whether the MySQL database should use foreign key constraints
1. Introduction The topic of whether to use forei...
Install JDK1.8 in Linux environment
Table of contents 1. Installation Environment 2. ...
Some data processing methods that may be commonly used in JS
Table of contents DOM processing Arrays method Su...
Summary of Mysql exists usage
Introduction EXISTS is used to check whether a su...
0.1 seconds worth! A brief discussion on the problem of speeding up the front-end web pages
I remember when I was interviewing for my current...
How to avoid the trap of URL time zone in MySQL
Preface Recently, when using MySQL 6.0.x or highe...
Example analysis of the search function of MySQL regular expressions (regexp and rlike)
This article uses examples to illustrate the sear...
Detailed usage of Vue timer
This article example shares the specific code of ...
Docker creates MySQL explanation
1. Download MySQL Image Command: docker pull mysq...