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: