JavaScript to implement search data display
|
This article shares the data display code for JavaScript search for your reference. The specific content is as follows Today’s results are as follows:
There are two key points in this case: First, use CSS to display styles The second is to use js to compare the input content with the content in the array so that the data containing the input content is displayed First, let's look at the difficulty of CSS display style : To make the contact parts of the two divs seamless, you need to set For the rounded borders on the left and right sides of the two div boxes, we need to set values for Next, let's look at the JS comparison part: The general idea is that when you enter content, the search box below will be displayed to show matching data; when you do not enter or the entered data does not match, no data will be displayed or no data will be displayed; when the search box loses focus, the search box below will disappear 1. When we enter content in the search box, we can call the 2. When the search box loses focus, we set the display attribute value of the search box below to none. The code is as follows:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.container {
width: 500px;
height: 160px;
padding: 40px;
margin: 100px auto
}
#one {
width: 268px;
height: 33px;
float: left;
border: 0;
border-top-left-radius: 20px;
border-bottom-left-radius: 20px;
background-color: rgb(245, 246, 247);
outline: none;
}
#search {
background-color: rgb(252, 85, 49);
color: white;
width: 70px;
height: 35px;
line-height: 35px;
text-align: center;
font-size: 13px;
border-radius: 20px;
border-top-left-radius: 0;
border-bottom-left-radius: 0;
float: left;
}
#show {
width: 270px;
height: 170px;
border: 1px solid rgba(77, 76, 76, 0.459);
display: none;
margin-top: 40px;
overflow: hidden;
}
#show div{
width: 100%;
height: 40px;
line-height: 40px;
text-indent: 1em;
display: block;
}
#show div:hover{
background-color: rgb(240, 240, 245);
cursor:pointer;
}
</style>
</head>
<body>
<div class="container">
<div id="nav">
<input type="text" id="one" placeholder="Please enter the course" autocomplete="on">
<div id="search">Search</div>
</div>
<div id="show">
<div></div>
</div>
</div>
<script>
let arr = ['Cakes are cheap', 'Want to eat fruit', '2333', 'CSS boutique course', '2 little friends', 'Here are 2 breads', 'Let's go together', 'Summer of the band', 'Nice weather'];
let one = document.getElementById("one");
let show = document.getElementById("show")
one.onfocus = function () {
show.style.display = "block";
one.style.border = "1px coral solid"
one.onkeyup = function () {
let str = '';
let term=false;
arr.forEach((item) => {
let index = item.indexOf(one.value);
if (~index) {
time=true;
str+='<div>'+item+'</div>';//Update the value of str every time, so there is no need to worry about duplication}
})
//Very important if(one.value=='' || !tem){
show.innerHTML='<div>'+'No results yet'+'</div>';
}
else{
show.innerHTML=str;
}
}
}
//The onblur event occurs when the object loses focus one.onblur = function () {
show.style.display = "none"
one.style.border = "1px transparent solid"
show.innerHTML='';
}
</script>
</body>
</html>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 commonly used commands for docker competition submission
>>: Detailed analysis of the problem of adding where conditions using left join in MySQL
Recommend
Detailed explanation of the this pointing problem of JavaScript prototype objects
Table of contents 1. this points to 2. Modify thi...
Implementation of Docker deployment of web projects
The previous article has installed the docker ser...
Detailed explanation of custom events of Vue components
Table of contents Summarize <template> <...
JS implements the curriculum timetable applet (imitating the super curriculum timetable) and adds a custom background function
Overview: I drew lessons from several timetable s...
Detailed use of Echarts in vue2 vue3
Table of contents 1. Installation 2. Use Echarts ...
Detailed tutorial for installing ElasticSearch:7.8.0 cluster with docker
ElasticSearch cluster supports動態請求的方式and靜態配置文件to ...
React example of how to get the value of the input box
React multiple ways to get the value of the input...
VirtualBox installs CentOS7 virtual machine and enhancement tools (picture and text)
The computer system is: win7 This article is main...
Vue.js application performance optimization analysis + solution
Table of contents 1. Introduction 2. Why do we ne...
MySQL SHOW PROCESSLIST assists in the entire process of troubleshooting
1. SHOW PROCESSLIST command SHOW PROCESSLIST show...
Complete code for implementing the vue backtop component
Effect: Code: <template> <div class=&quo...
How to implement mysql database backup in golang
background Navicat is the best MySQL visualizatio...
A detailed discussion on detail analysis in web design
In design work, I often hear designers participati...
How to use environment variables in nginx configuration file
Preface Nginx is an HTTP server designed for perf...
Detailed explanation on reasonable settings of MySQL sql_mode
Reasonable setting of MySQL sql_mode sql_mode is ...