您好,登錄后才能下訂單哦!
本篇內(nèi)容主要講解“怎么用JavaScript實(shí)現(xiàn)搜索的數(shù)據(jù)顯示”,感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷,實(shí)用性強(qiáng)。下面就讓小編來帶大家學(xué)習(xí)“怎么用JavaScript實(shí)現(xiàn)搜索的數(shù)據(jù)顯示”吧!
具體內(nèi)容如下
今天的效果如下:
這個(gè)案例的要點(diǎn)有兩個(gè):
一是使用CSS顯示樣式
二是使用js比較輸入的內(nèi)容和數(shù)組中的內(nèi)容使得包含輸入內(nèi)容的數(shù)據(jù)顯示出來
首先來看CSS顯示樣式的難點(diǎn):
兩個(gè)div的接觸部分,要想讓它們無縫隙接觸,就需要設(shè)置float:left;
兩個(gè)div盒子左右兩側(cè)的圓角邊框,我們需要分別為border-top-left-radius
等設(shè)置值,這樣就大致得到了搜索框的樣式,剩下的細(xì)節(jié)可以去代碼中查看~
接著來看JS進(jìn)行比較的部分:
總的思想呢,就是當(dāng)輸入內(nèi)容時(shí)使下方顯示搜索框,顯示匹配的數(shù)據(jù);不輸入或輸入數(shù)據(jù)不匹配時(shí),不顯示數(shù)據(jù)或顯示暫無數(shù)據(jù);搜索框失去焦點(diǎn)時(shí)使下方的搜索框消失
1、當(dāng)我們?cè)谒阉骺蛑休斎雰?nèi)容時(shí),我們可以調(diào)用onkeyup
函數(shù),先使下方的搜索框display屬性值為block;
然后在其中調(diào)用forEach
遍歷數(shù)組中的所有數(shù)據(jù),通過value獲得輸入的內(nèi)容,調(diào)用indexOf
將該內(nèi)容與數(shù)組中的數(shù)據(jù)進(jìn)行比較,若有匹配項(xiàng)的話,其返回值是數(shù)組中數(shù)據(jù)的下標(biāo),否則為-1;
若有匹配項(xiàng)的話,我們可以利用innerHTML,在下面的顯示框中添加p標(biāo)簽,p中的內(nèi)容是匹配的數(shù)據(jù);如果沒有就返回內(nèi)容是‘暫無數(shù)據(jù)'的p標(biāo)簽
2、當(dāng)該搜索框失去焦點(diǎn)時(shí),我們令下方搜索框的display屬性值為none就可以了
代碼如下:
<!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="請(qǐng)輸入課程" autocomplete="on"> <div id="search">搜索</div> </div> <div id="show"> <div></div> </div> </div> <script> let arr = ['蛋糕便宜賣', '想吃水果', '2333', 'css精品課程','2個(gè)小朋友','這兒有2個(gè)面包','我們一起','樂隊(duì)的夏天','天氣真好']; 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+='<div>'+item+'</div>';//每次都更新str的值,所以不用擔(dān)心重復(fù) } }) //很重要 if(one.value=='' || !tem){ show.innerHTML='<div>'+'暫無結(jié)果'+'</div>'; } else{ show.innerHTML=str; } } } //onblur 的事件會(huì)在對(duì)象失去焦點(diǎn)時(shí)發(fā)生 one.onblur = function () { show.style.display = "none" one.style.border = "1px transparent solid" show.innerHTML=''; } </script> </body> </html>
到此,相信大家對(duì)“怎么用JavaScript實(shí)現(xiàn)搜索的數(shù)據(jù)顯示”有了更深的了解,不妨來實(shí)際操作一番吧!這里是億速云網(wǎng)站,更多相關(guān)內(nèi)容可以進(jìn)入相關(guān)頻道進(jìn)行查詢,關(guān)注我們,繼續(xù)學(xué)習(xí)!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場,如果涉及侵權(quán)請(qǐng)聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。