Shulou(Shulou.com)06/02 Report--

This article focuses on "how to use JavaScript to achieve search data display", interested friends may wish to take a look. The method introduced in this paper is simple, fast and practical. Now let the editor take you to learn "how to use JavaScript to achieve search data display"!

The details are as follows

Today's effect is as follows:

There are two main points in this case:

One is to use CSS display style

The second is to use js to compare the input and the contents of the array so that the data containing the input is displayed.

First, let's look at the difficulties of the CSS display style:

The contact parts of two div, if you want them to contact seamlessly, you need to set up float:left

For the fillet 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 remaining details can be checked in the code.

Then let's take a look at the comparison section of JS:

The general idea is that when entering content, a search box is displayed below to show the matching data; when the input data is not entered or the input data does not match, the data is not displayed or there is no data temporarily; when the search box loses focus, the search box below disappears

1. When we type in the search box, we can call the onkeyup function and first set the value of the display attribute of the search box below to block

Then call forEach to traverse all the data in the array, get the input through value, and call indexOf to compare it with the data in the array. If there is a match, the return value is the subscript of the data in the array, otherwise it is-1.

If there is a match, we can use innerHTML to add the p tag in the display box below. The content in p is the matching data; if not, the p tag with "no data temporarily" is returned.

2. When the search box loses focus, we can make the display attribute of the search box below be none.

The code is as follows:

Document .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,246247); 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: 1mm; display: block;} # show div:hover {background-color: rgb (240240245) Cursor:pointer Search for let arr = ['cake is cheap', 'want to eat fruit', '2333', 'css boutique course','2 children', 'here are 2 loaves of bread','we are together', 'summer in 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 tem=false Arr.forEach ((item) = > {let index = item.indexOf (one.value); if (~ index) {tem=true; str+=''+item+'' / / update the value of str every time, so don't worry about repeating}}) / / very important if (one.value=='' | |! tem) {show [XSS _ clean] =''+'no result yet'+' } else {show [XSS _ clean] = str The event of} / / onblur occurs when the object loses focus one.onblur = function () {show.style.display = "none" one.style.border = "1px transparent solid" show [XSS _ clean] ='' } at this point, I believe you have a deeper understanding of "how to use JavaScript to achieve search data display". You might as well do it in practice. Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.