JS自动补全插件 V1.0.1★分享
使用场景
功能强大的,最轻量级自动补全插件,仅有5KB
本插件主要用于:网站搜索、邮箱填写等信息输入时,异步请求数据自动补全内容。
插件引用
CSS依赖 : autoComplete.css
JS依赖 : jquery.js 、autoComplete.js
插件下载:autoComplete1.0.1-min.rar
默认配置参数
fed.autoComplete({
input : '#js_autoComplete1', //补全绑定的输入框
skinClass : '', // 补全皮肤的className
zIndex : 9, //设置补全内容的index
listTemplate : '<li data-value="{{searchValue}}"><a><p>{{searchValue}}</p></a></li>', //补全列表的模板,对应数组的对象,选中时默认把li上data-value的值带到输入框。
activeName : 'active', //补全的选中状态样式
tipContent : '对不起,找不到:{{keyword}}', //无结果的提示模板,keyword等于输入框的内容
ajaxUrl:null, //ajax请求的url,用{{keyword}}可以带入输入的内容,例如:'http://www.baidu.com/search.php?key={{keyword}}'
ajaxType : 'GET', //请求方式
ajaxDataType : 'jsonp', //请求类型
ajaxJsonpCallback : 'recive', //jsonp的回调函数名;
dataKey : null, //需要渲染的数组对象的key,如果返回的数据就是数组,不需配置。如果为多级数据可用对象方式查找例如:'matchList.arr'
ajaxSuccess : null , //请求成功回调,如果写回调函数,默认不渲染下拉列表。function(data,listHtml)可接收2个参数,第一个是数据,第二个是已有列表结构。补全div对象可在this.options里获得。
upDownCallback : null, //上下选择回调,function可接收一个参数,为当前选中的li。
emptyCallback : null, //清空input回调函数
noDataCallback : null, //无结果的回调函数
enterCallback : null //回车和点击选中回调函数,function可接收一个参数,为当前选中的li。
});
小贴士:listTemplate参数,是一个列表模板,结构可以自己定义。只要把数组下面的对象名称写在{{}}里,就会把数据渲染进去。也可以实现对象多级查找。
例如下面的demo中{{detail.name}},可以查找数组里面detail对象的name值。
Demo
- 景点门票
Demo 数据结构
{
"keyword": "s",
"matchList": [
{
"destId": "79",
"destName": "上海",
"hotels": {
"typeCount": 3871,
"url": "hotel/U9"
},
"keywordPos": "DEST",
"pinyin": "shanghai",
"searchValue": "上海",
"tickets": {
"type": "ticket",
"typeCount": 427,
"url": "ticket/H9?keyword=上海"
},
"type": "route",
"url": "route/H9?keyword=上海",
"detail":{
"name":"上海欢乐谷",
"juli":200
}
},
{
"destId": "272",
"destName": "三亚",
"keywordPos": "DEST",
"pinyin": "sanya",
"searchValue": "三亚",
"type": "route",
"url": "route/H9?keyword=三亚",
"detail":{
"name":"三亚海滩",
"juli":300
}
},
{
"destId": "87",
"destName": "苏州",
"keywordPos": "DEST",
"pinyin": "suzhou",
"searchValue": "苏州",
"type": "route",
"url": "route/H9?keyword=苏州",
"detail":{
"name":"苏州恐龙园",
"juli":600
}
},
{
"destId": "159",
"destName": "山东",
"keywordPos": "DEST",
"pinyin": "shandong",
"searchValue": "山东",
"type": "route",
"url": "route/H9?keyword=山东",
"detail":{
"name":"山东大侠",
"juli":700
}
},
{
"destId": "175649",
"destName": "上海迪士尼乐园",
"keywordPos": "DEST",
"pinyin": "shanghaidishinileyuan",
"searchValue": "上海迪士尼乐园",
"type": "route",
"url": "route/H9?keyword=上海迪士尼乐园",
"detail":{
"name":"上海迪士尼乐园"
}
}
]
}
Demo 调用方式
fed.autoComplete({
input : '#js_autoComplete1',
ajaxUrl:'pm.json?keyword={{keyword}}',
ajaxDataType : 'json',
dataKey : 'matchList',
listTemplate : '<li destId="{{destId}}" data-value="{{searchValue}}"><a><p>{{searchValue}}({{detail.juli?detail.juli:距离未知}}){{detail.name}}</p></a></li>',
enterCallback : function(){
console.log(this.$input); //输出当前input的jquery对象,其他回调的取法同此。
}
});