首页>常用插件

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对象,其他回调的取法同此。 } });