本文实例为大家分享了js实现百度淘宝搜索功能的具体代码,供大家参考,具体内容如下
由于没有后台数据,用数组模拟一下后台返回的数据
& lt; !DOCTYPE html>
& lt; html lang=癳n”比;
& lt; head>
& lt;元charset=皍tf - 8”比;
& lt;元name=笆哟啊蹦谌?翱矶?设备宽度,初始=1.0”比;
& lt;元http-equiv=癤-UA-Compatible”内容=癷e=边缘”比;
& lt; title> Document
& lt; style>
.box {
宽度:214 px;/*高度:400 px; */保证金:100 px的汽车;
位置:相对;
}
& lt;/style>
& lt;/head>
& lt; body>
& lt; div类="盒子"比;
& lt;输入类型="文本" id=叭帧北?
& lt;输入类型="按钮" id=" btn " value=" https://www.yisu.com/zixun/搜索”在
& lt;/div>
& lt;脚本src=" https://www.yisu.com/zixun/common.js "祝辞& lt;/script>
& lt; script>//模拟后台的数据
var关键字=[
“一马当先”,
“一箭双雕”,
“一丝不苟”,
“一心二用”,
“吃火锅”,
“吃鸡肉”,
“吃鸡腿”,
“吃鸡蛋”,
“哈1哈”,
“嘻嘻1”,
“呜1呜”,
];//给文本框注册键盘松开事件
查询美元(“# txt”)。onkeyup=function () {
var txt=$查询(“# txt”) value;
如果查询($ ("。框div)) {
(查询(“.box”) .removeChild美元查询(“。框div "));
}
如果(txt)。长度==0){
如果查询($ ("。框div)) {
(查询(“.box”) .removeChild美元查询(“。框div "));
}
返回;
}
var newArr=[];
(var=0;我& lt;keyWords.length;我+ +){
如果(关键字[我].indexOf (txt) !=1) {
newArr.push(关键词[我]);
}
}
如果(newArr。长度比;0){
var newBox=document.createElement (" div ");
newBox.style。边境=" 1 px固体红”;
newBox.style。宽度=?00%”;
查询美元(“.box”) .appendChild (newBox);
(var j=0;j & lt;newArr.length;j + +) {
var newP=document.createElement (“p”);
newP.style。宽度=?00%”;
newP。innerText=newArr实现[j];
newP。onmouseover=function () {
this.style。写成backgroundColor=盎粕?
}
newP。onmouseout=function () {
this.style。写成backgroundColor=" ";
}
newBox.appendChild (newP);
}
}
console.log (newArr);//打印匹配的数据
}
& lt;/script>
& lt;/body>
& lt;/html>
最后,附上效果图,确实丑了点& # 63;
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
