& lt; !DOCTYPE html>
& lt; html lang=癳n”比;
& lt; head>
& lt;元charset=皍tf - 8”比;
& lt; title> Document
& lt; style>
* {
保证金:0;
填充:0;
}
输入{
显示:块;
list-style:没有;
}
html,身体{
颜色:# 000;
字体大小:14 px;
字体类型:“微软雅黑”;
}
.box {
保证金:50 px汽车;
宽度:300 px;
}
.box输入{
填充:0 10 px;
宽度:278 px;
高度:30 px;
边界:1 px固体绿色;
}
.box ul {
显示:没有;
边界:1 px固体绿色;
border-top:没有;
}
李.box ul {
list-style:没有;
填充:0 10 px;
高度:30 px;
行高:30 px;
光标:指针;
}
.box ul李:{徘徊
背景:# eee;
}
& lt;/style>
& lt;/head>
& lt; body>
& lt; div类=昂凶印北?
& lt;输入类型="文本" id=皊earchInp”/比;
& lt; ul id=皊earchBox”比;
& lt; li> 1111 & lt;/li>
& lt; li> 2222 & lt;/li>
& lt; li> 3333 & lt;/li>
& lt; li> 4444 & lt;/li>
& lt;/ul>
& lt;/div>
& lt;脚本src=" https://www.yisu.com/zixun/jquery.min.js "祝辞& lt;/script>
& lt; script>
var searchModule=(函数(){
var searchInp=美元(“# searchInp”),
美元searchBox=$ (' # searchBox ');//向百度的服务器发送JSONP请求,把数据绑定到容器当中
函数bindHTML () {
var searchKey=$ searchInp.val ();
回调函数(数据){
data=https://www.yisu.com/zixun/data (“g”);
var str=";
$ . each(数据、函数(指数项){
如果(index<=3) {
str +=& lt; li>”+项目+ & lt;/li>”
}
})
searchBox.html美元(str)鸡毛蒜皮().slideDown (300);
}
. ajax({美元
url: https://sp0.baidu.com/5a1Fazu8AA54nxGKo9WTAnF6hhy/su& # 63; wd=" + searchKey,
数据类型:“jsonp”,
jsonp:“cb”,
成功:回调
})
}//事件绑定和模块的入口
init()函数{//文本框获取焦点或者输入内容,判断当前文本框中是否有内容,有内容绑定数据,没有内容隐藏展示框
searchInp美元。(“焦点keyup”功能(){
var val=$(这).val ();
如果(val.length> 0) {
bindHTML ();
返回;
}
$ searchBox.stop () .slideUp (300);
})。(“模糊”,函数(){
window.setTimeout(函数(){
$ searchBox.stop () .slideUp (300);
}, 3000)
})//给展示框中李的绑定方法
美元searchBox.on(“点击”,函数(e) {
var焦油=e。target,
tarTag=tar.tagName.toUpperCase (),
焦油=美元(tar);
如果(tarTag===袄睢?{
(searchInp.val美元tar.html ());
美元(这)鸡毛蒜皮().slideUp (300);
}
})
}
返回{
init:
}
})()
searchModule.init ();
& lt;/script>
& lt;/body>
& lt;/html>
以上这篇js模拟百度模糊搜索的实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持。
