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

Implementation of LNMP for separate deployment of Docker containers

1. Environmental Preparation The IP address of ea...

Detailed explanation of the execution principle of MySQL kill command

Table of contents Kill instruction execution prin...

Detailed explanation of the code for implementing linear gradients with CSS3

Preface The gradient of the old version of the br...

Detailed explanation of Vue3.0 + TypeScript + Vite first experience

Table of contents Project Creation Project Struct...

JavaScript design pattern chain of responsibility pattern

Table of contents Overview Code Implementation Pa...

Analysis of mysql temporary table usage [query results can be stored in temporary tables]

This article uses an example to illustrate the us...

How to get the current time using time(NULL) function and localtime() in Linux

time(); function Function prototype: time_t time(...

Detailed explanation of the calculation method of flex-grow and flex-shrink in flex layout

Flex(彈性布局) in CSS can flexibly control the layout...

Create a virtual environment using venv in python3 in Ubuntu

1. Virtual environment follows the project, creat...

Implementation code for installing vsftpd in Ubuntu 18.04

Install vsftpd $ sudo apt-get install vsftpd -y S...

JavaScript implements cool mouse tailing effects

After watching this, I guarantee that you have ha...

Share 8 MySQL pitfalls that you have to mention

MySQL is easy to install, fast and has rich funct...

Detailed explanation of the whole process and steps of installing clion on Ubuntu16.04

Explain the whole process of CLion from scratch. ...

Vue+js click arrow to switch pictures

This article example shares the specific code of ...

Solution to the problem that the virtual machine Ubuntu 16.04 cannot connect to the Internet

I just installed Ubuntu and there was no network ...