您好,登錄后才能下訂單哦!
本文實(shí)例為大家分享了js實(shí)現(xiàn)百度淘寶搜索功能的具體代碼,供大家參考,具體內(nèi)容如下
由于沒有后臺數(shù)據(jù),用數(shù)組模擬一下后臺返回的數(shù)據(jù)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> .box{ width:214px; /*height: 400px;*/ margin: 100px auto; position: relative; } </style> </head> <body> <div class="box"> <input type="text" id="txt"> <input type="button" id="btn" value="搜索"> </div> <script src="common.js"></script> <script> //模擬后臺的數(shù)據(jù) var keyWords = [ "一馬當(dāng)先", "一箭雙雕", "一絲不茍", "一心二用", "吃火鍋", "吃雞肉", "吃雞腿", "吃雞蛋", "哈1哈", "嘻1嘻", "嗚1嗚", ]; //給文本框注冊鍵盤松開事件 $query("#txt").onkeyup = function () { var txt = $query("#txt").value; if ($query(".box div")) { $query(".box").removeChild($query(".box div")); } if (txt.length == 0) { if ($query(".box div")) { $query(".box").removeChild($query(".box div")); } return; } var newArr = []; for (var i = 0; i < keyWords.length; i++) { if (keyWords[i].indexOf(txt) !=-1) { newArr.push(keyWords[i]); } } if (newArr.length > 0) { var newBox = document.createElement("div"); newBox.style.border = "1px solid red"; newBox.style.width = "100%"; $query(".box").appendChild(newBox); for (var j = 0; j < newArr.length; j++) { var newP = document.createElement("p"); newP.style.width = "100%"; newP.innerText = newArr[j]; newP.onmouseover = function () { this.style.backgroundColor = "yellow"; } newP.onmouseout = function () { this.style.backgroundColor = ""; } newBox.appendChild(newP); } } console.log(newArr);//打印匹配的數(shù)據(jù) } </script> </body> </html>
最后,附上效果圖,確實(shí)丑了點(diǎn)?
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持億速云。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。