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
How to use indexes to optimize MySQL ORDER BY statements
Create table & create index create table tbl1...
Detailed explanation of nginx server installation and load balancing configuration on Linux system
nginx (engine x) is a high-performance HTTP and r...
Introducing ECharts into the Vue project
Table of contents 1. Installation 2. Introduction...
HTML Editing Basics (A Must-Read for Newbies)
Open DREAMWEAVER and create a new HTML. . Propert...
Intellij IDEA quick implementation of Docker image deployment method steps
Table of contents 1. Docker enables remote access...
Detailed explanation of two ways to implement session persistence in Nginx reverse proxy
1. ip_hash: ip_hash uses a source address hash al...
Detailed explanation of common commands in MySQL 8.0+
Enable remote access Enable remote access rights ...
The spacing between multiple divs with inline-block is different from the programming method
When learning about inline-block, I found that the...
Example code for building an admin dashboard layout using CSS and JavaScript
What you will create In this new tutorial, we'...
Use of CSS3's focus-within selector
Pseudo-elements and pseudo-classes Speaking of th...
CSS naming conventions (rules) worth collecting Commonly used CSS naming rules
CSS naming conventions (rules) Commonly used CSS ...
Analysis of the principles and usage of Linux hard links and soft links
In the Linux system, there is a kind of file call...
Detailed explanation of the implementation of shared modules in Angular projects
Table of contents 1. Shared CommonModule 2. Share...
MySQL derived table (Derived Table) simple usage example analysis
This article uses an example to describe the simp...
MySQL 8.0.20 installation and configuration method graphic tutorial under Windows 10
Win10 system locally installed MySQL8.0.20, perso...