JavaScript to implement search data display

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 float：left；

For the rounded borders on the left and right sides of the two div boxes, we need to set values ​​for border-top-left-radius , etc., so that we can roughly get the style of the search box. The rest of the details can be viewed in the code~

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 onkeyup function to first set the display attribute value of the search box below to block;
Then call forEach to traverse all the data in the array, get the input content through value , call indexOf to compare the content with the data in the array, if there is a match, the return value is the index of the data in the array, otherwise it is -1;
If there is a match, we can use innerHTML to add a p tag in the display box below, and the content in p is the matching data; if there is no match, a p tag with the content "No data yet" is returned.

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:
  • js to implement table data search
  • JavaScript sorting and searching JSON data
  • JS method to realize various search functions of table data

<<:  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 steps for setting up the network for the virtual machine that comes with win10 (graphic tutorial)

1. Click the server host and click "Virtual ...

What is the function and writing order of the a tag pseudo class

The role of the a tag pseudo-class: ":link&qu...

MySQL 5.6.23 Installation and Configuration Environment Variables Tutorial

This article shares the installation and configur...

Basic usage examples of Vue named slots

Preface Named slots are bound to elements using t...

MySQL Interview Questions: How to Set Up Hash Indexes

In addition to B-Tree indexes, MySQL also provide...

Some problems you may encounter when installing MySQL

Question 1: When entering net start mysql during ...

SQL implementation LeetCode (185. Top three highest salaries in the department)

[LeetCode] 185. Department Top Three Salaries The...

Detailed steps for installing, configuring and uninstalling QT5 in Ubuntu 14.04

1. I downloaded QT5.13 version before, but after ...

CSS sprites technology integrates multiple backgrounds into one PNG image CSS positioning

The image integration technology used by American...

How to monitor mysql using zabbix

Zabbix deployment documentation After zabbix is ​...

Example of how to change the line spacing of HTML table

When using HTML tables, we sometimes need to chan...

MySQL sorting Chinese details and examples

Detailed explanation of MySQL sorting Chinese cha...

Detailed steps to install RabbitMQ in docker

Table of contents 1. Find the mirror 2. Download ...

5 Ways to Clear or Delete Large File Contents in Linux

Sometimes, while working with files in the Linux ...

Implementation of textarea adaptive height solution in Vue

Table of contents Hidden Problems Solution to ada...