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 update, package, and upload Docker containers to Alibaba Cloud
This time, we will try to package the running con...
WeChat applet to achieve automatic video playback imitating GIF animation effect example
Demand background: Insert GIF dynamic images into...
JavaScript to implement a simple shopping form
This article shares the specific code of JavaScri...
Tutorial on installing and configuring Tomcat on Alibaba Cloud Server and adding external network access ports
Alibaba Cloud Server installs and configures Tomc...
JavaScript static scope and dynamic scope explained with examples
Table of contents Preface Static scope vs. dynami...
Example code showing common graphic effects in CSS styles
Let me briefly describe some common basic graphic...
MySQL optimization: use join instead of subquery
Use JOIN instead of sub-queries MySQL supports SQ...
A quick guide to MySQL indexes
The establishment of MySQL index is very importan...
Use of Linux crontab command
1. Command Introduction The contab (cron table) c...
Ubuntu 18.04 one-click upgrade of all third-party Python packages and installation of Python packages
1. What is pip pip is a Python package management...
Introduction to the use of several special attribute tags in HTML
The following attributes are not very compatible w...
MySQL select results to perform update example tutorial
1. Single table query -> update UPDATE table_n...
Learn the black technology of union all usage in MySQL 5.7 in 5 minutes
Performance of union all in MySQL 5.6 Part 1:MySQ...
CentOS7 64-bit installation mysql graphic tutorial
Prerequisites for installing MySQL: Install CentO...
MySQL 5.7.15 installation and configuration method graphic tutorial (windows)
Because I need to install MySQL, I record the ins...