Autocomplete 自动完成
使用说明
本框架已经弃用awsomplete插件，而改为基于fuse.js的自主编写的自动完成（自动补全）插件。本插件有如下特点：
- 使用方便:对input使用axComplete属性和list属性即可弃用自动完成功能。
- 高亮显示：对匹配字符予以高亮显示。
- 待检索列表：对input没有做任何输入的时候可打开待检索的列表。
- 自定义提示位置：检索结果可存放在任意位置，默认是在popup里。
- 模糊检索：基于fuse.js的检索阈值进行模糊检索。
使用方法
插件运行方式有两种：
- ax*属性：对input标签使用
axComplete属性和list属性即可按默认参数运行插件。 - js实例：通过
new axComplete('#ID',{list:[]})方式创建实例运行。
对input使用list属性列举下拉菜单选项，用英文逗号隔开。
名称
名称
-
<div class="ax-form-group"> <div class="ax-flex-row"> <div class="ax-form-label">名称</div> <div class="ax-form-con"> <div class="ax-form-input"> <input type="text" axComplete='list:"Apple苹果, Banana香蕉, Tomato西红柿, Grape葡萄, Haw山楂, Lemon柠檬, Orange橙子"' /> </div> </div> </div> </div> <div class="ax-break"></div>输入a看看！ <div class="ax-break"></div> <div class="ax-form-group"> <div class="ax-flex-row"> <div class="ax-form-label">名称</div> <div class="ax-form-con"> <div class="ax-form-input"> <input type="text" id="jsIns"/> </div> </div> </div> </div> -
let jsInstance = new axComplete('#jsIns',{ list:["Apple苹果", "Banana香蕉", "Tomato西红柿", "Grape葡萄", "Haw山楂", "Lemon柠檬", "Orange橙子"] });
datalist列举选项
用datalist标签填充待检索数据，对input使用#id值填入list属性，以独立形式引用选项。
名称
<div class="ax-form-group">
<div class="ax-flex-row">
<div class="ax-form-label">名称</div>
<div class="ax-form-con">
<div class="ax-form-input">
<input type="text" axComplete='list:"#list01"' />
</div>
</div>
</div>
</div>
<datalist id="list01">
<option>Apple苹果</option>
<option>Banana香蕉</option>
<option>Tomato西红柿</option>
<option>Grape葡萄</option>
<option>Haw山楂</option>
<option>Lemon柠檬</option>
<option>Orange橙子</option>
</datalist>
数组列举选项
如果以js方式启用插件，对于数据源可按数组使用，格式如下。
- ["","",""]，普通一维数组
- [{name:""},{name:""},{name:""}]，带一级对象的数组，
名称
-
<div class="ax-form-group"> <div class="ax-flex-row"> <div class="ax-form-label">名称</div> <div class="ax-form-con"> <div class="ax-form-input"> <input type="text" id="arrayIns"/> </div> </div> </div> </div> <div class="ax-break"></div>输入a看看！ -
let array = [{name:"Apple苹果"}, {name:"Banana香蕉"}, {name:"Tomato西红柿"}, {name:"Grape葡萄"}, {name:"Haw山楂"}, {name:"Lemon柠檬"}, {name:"Orange橙子"}] let arrayInstance = new axComplete('#arrayIns',{ list:array });
结果提示
插件默认显示结果提示，通过使用tips参数可改变存放位置或者不显示，参数如下：
- false：不显示
- inside：在popup中显示
- inline：在input下方显示
- #id：在某id的容器中显示
不显示
input下方
ID容器
<div class="ax-form-group">
<div class="ax-flex-row">
<div class="ax-form-label">不显示</div>
<div class="ax-form-con">
<div class="ax-form-input">
<input type="text" axComplete='list:"Apple苹果, Banana香蕉, Tomato西红柿, Grape葡萄, Haw山楂, Lemon柠檬, Orange橙子",tips:false' />
</div>
</div>
</div>
</div>
<div class="ax-break"></div>
<div class="ax-form-group">
<div class="ax-flex-row">
<div class="ax-form-label">input下方</div>
<div class="ax-form-con">
<div class="ax-form-input">
<input type="text" axComplete='list:"Apple苹果, Banana香蕉, Tomato西红柿, Grape葡萄, Haw山楂, Lemon柠檬, Orange橙子",tips:"inline"' />
</div>
</div>
</div>
</div>
<div class="ax-break"></div>
<div class="ax-form-group">
<div class="ax-flex-row">
<div class="ax-form-label">ID容器</div>
<div class="ax-form-con">
<div class="ax-form-input">
<input type="text" axComplete='list:"Apple苹果, Banana香蕉, Tomato西红柿, Grape葡萄, Haw山楂, Lemon柠檬, Orange橙子",tips:"#tips"' />
</div>
</div>
<span class="ax-form-txt ax-color-ignore" id="tips"></span>
</div>
</div>
自定义模板
默认的列表模板是简单的文字列表，如果用户想自定义模板格式可通过以下方法创建：
- 第一步：通过list参数定义数据源并创建数据源，定义好数据名称，比如：[{name:'',img:'',num:''},{name:'',img:'',num:''}]
- 第二步：通过template参数定义模板，模板中所使用的字段必须是数据源中的字段，而且role="item"和role="name"属性是必须的，请参考实例。
- 第三步：通过keys参数定义检索的字段，与数据源相对应，比如：["name","img","num"]。
Json数据源
-
<div class="ax-form-group"> <div class="ax-flex-row"> <div class="ax-form-label">datalist数据源</div> <div class="ax-form-con"> <div class="ax-form-input"> <input type="text" id="tplIns" /> </div> </div> </div> </div> <div class="ax-break"></div>输入a看看！ -
let arrayTpl = [{ name: "南航与英航签署联营合作协议代码共享", img: 'https://src.axui.cn/v2.0/public/images/head02.jpg', num: '985' }, { name: "12月，到英国大城小镇看“亮灯”", img: 'https://src.axui.cn/v2.0/public/images/head02.jpg', num: '985' }, { name: "英国人喝茶不再流行贵族范", img: 'https://src.axui.cn/v2.0/public/images/head03.jpg', num: '234', }, { name: "西班牙斗牛与逗牛，精彩各不同", img: 'https://src.axui.cn/v2.0/public/images/head04.jpg', num: '98', }] let tpl = '<a href="###" class="ax-info-block ax-hover" role="item">' + '<div class="ax-row">' + '<span class="ax-head" style="background-image:url(<# this[Object.keys(this)[0]].img #>);"></span>' + '<div class="ax-col"><span class="ax-ell" role="name"><# this[Object.keys(this)[0]].name #></span></div>' + '<span class="ax-arrow"><# this[Object.keys(this)[0]].num #>次</span>' + '</div>' + '</a>'; let tplInstance = new axComplete('#tplIns', { list: arrayTpl, keys: ['name', 'img', 'num'], template: tpl, });
自定义模板的时候数据源可选择使用datalist，option的文本将被默认定义为name，value值定义为value，其他的属性通过data-*来定义。
datalist数据源
-
<div class="ax-form-group"> <div class="ax-flex-row"> <div class="ax-form-label">datalist数据源</div> <div class="ax-form-con"> <div class="ax-form-input"> <input type="text" id="tplIns02" /> </div> </div> </div> </div> <div class="ax-break"></div>输入a看看！ <datalist id="tplList"> <option data-num="215" data-img="https://src.axui.cn/v2.0/public/images/head01.jpg" value="Apple苹果">Apple苹果</option> <option data-num="105" data-img="https://src.axui.cn/v2.0/public/images/head02.jpg" value="Banana香蕉">Banana香蕉</option> <option data-num="1278" data-img="https://src.axui.cn/v2.0/public/images/head03.jpg" value="Tomato西红柿">Tomato西红柿</option> <option data-num="384" data-img="https://src.axui.cn/v2.0/public/images/head04.jpg" value="Grape葡萄">Grape葡萄</option> <option data-num="24" data-img="https://src.axui.cn/v2.0/public/images/head05.jpg" value="Haw山楂">Haw山楂</option> <option data-num="567" data-img="https://src.axui.cn/v2.0/public/images/head06.jpg" value="Lemon柠檬">Lemon柠檬</option> <option data-num="193" data-img="https://src.axui.cn/v2.0/public/images/head07.jpg" value="Orange橙子">Orange橙子</option> </datalist> -
let tpl = '<a href="###" class="ax-info-block ax-hover" role="item">' + '<div class="ax-row">' + '<span class="ax-head" style="background-image:url(<# this[Object.keys(this)[0]].img #>);"></span>' + '<div class="ax-col"><span class="ax-ell" role="name"><# this[Object.keys(this)[0]].name #></span></div>' + '<span class="ax-arrow"><# this[Object.keys(this)[0]].num #>次</span>' + '</div>' + '</a>'; let tplInstance02 = new axComplete('#tplIns02', { list: '#tplList', keys: ['name', 'img', 'num'], template: tpl, });
用按钮打开选项
在创建好按钮dom之后，对插件使用rel参数可打开popup窗口。rel可以是#id也可以是dom。
<div class="ax-form-group">
<div class="ax-flex-row">
<div class="ax-form-label">名称</div>
<div class="ax-form-con">
<div class="ax-form-input">
<input type="text" axComplete='rel:"#open",list:"Apple苹果, Banana香蕉, Tomato西红柿, Grape葡萄, Haw山楂, Lemon柠檬, Orange橙子"' />
<span class="ax-pos-right"><a href="###" class="ax-iconfont ax-icon-down" id="open"></a></span>
</div>
</div>
</div>
</div>
<div class="ax-break"></div>输入a看看！
填入其他值
插件默认项input填入项目名称，可通过fill参数改变填入的值，比如value。
<div class="ax-form-group">
<div class="ax-flex-row">
<div class="ax-form-label">名称</div>
<div class="ax-form-con">
<div class="ax-form-input">
<input type="text" axComplete='fill:"value",list:"#valueList",keys:["name","value"],rel:"#open02"'/>
<span class="ax-pos-right"><a href="###" class="ax-iconfont ax-icon-down" id="open02"></a></span>
</div>
</div>
</div>
</div>
<div class="ax-break"></div>输入a看看！
<datalist id="valueList">
<option value="fruit01">Apple苹果</option>
<option value="fruit02">Banana香蕉</option>
<option value="fruit03">Tomato西红柿</option>
<option value="fruit04">Grape葡萄</option>
<option value="fruit05">Haw山楂</option>
<option value="fruit06">Lemon柠檬</option>
<option value="fruit07">Orange橙子</option>
</datalist>
监听事件
本插件有若干监听方法，以on为关键字，实例后监听和在参数中监听效果相同。格式是：instance.on('event',function(){})；具体事件说明如下：
selected点选项目后执行，有一个参数：当前选择的项，是至少包含id、name和value的对象
演示实例显示结果使用了console.log方法，请按下F12按键打开开发者工具中的“控制台”查看监听效果。
名称
-
<div class="ax-form-group"> <div class="ax-flex-row"> <div class="ax-form-label">名称</div> <div class="ax-form-con"> <div class="ax-form-input"> <input type="text" id="on"/> </div> </div> </div> </div> <div class="ax-break"></div>输入a看看！ -
let onInstance = new axComplete('#on', { list: ["Apple苹果", "Banana香蕉", "Tomato西红柿", "Grape葡萄", "Haw山楂", "Lemon柠檬", "Orange橙子"] }); onInstance.on('selected',function(item){ console.log('刚更新了内容'); console.log(item); })
参数选项
document.addEventListener("DOMContentLoaded", function() {
var demo1 = new axComplete('#id',{
list: '',//检索数据源
keys: ['name'],//检索字段（属性）
threshold: 0.6,//匹配阈值，小于该值将不检索出来
isCaseSensitive: false,//是否区分大小写
hasMatches: true,//是否包含匹配项
minLength: 1,//检索关键字最小字数
findAll: false,//是否找出来全部匹配项
template: '',//生成检索结果列表的模板
className: '',//生成检索结果列表的类名
break: true,//检索结果是否使用分割线
tips: 'inside',//结果提示存放在哪里，默认放在结果列表顶部，可以使用#id，inline，dom或false
highlight: true,//是否让关键字高亮，默认高亮
rel: '',//打开popup的关联按钮
fill: 'name',//填入到input的值，默认为name，可以填id、value或者自定义的属性
idStart: 1,//生成的标准数据数组的id属性从那个值开始，默认为1
});
});
以axMenu插件为例，如果在元素上通过ax*使用属性，需要使用类似json的写法，属性不需要使用引号，如果值是字符串需要使用引号包裹，如果值是数字、布尔值、null或undefined不需要引号；比如要设置active，那么在元素的ax*属性中应该这样书写：axMenu="active:2"
操作方法
| 名称 | 说明 | 参数说明 | 回调函数 |
|---|---|---|---|
| init() | 初始化 | 无参数 | 无回调函数 |
| on(type, handler) | 添加监听事件 | type是监听事件，事件类型可看前文的：监听方法；handler是回调函数 | function(item)){} item：当前数据 |
在回调函数中this均指向实例本身，所以在回调函数中可默认使用如下变量：
- this：实例本身
- this.popup.targetDom：实例的Dom
- this.input：触发实例的input
- this.results：检索结果，Json格式
- this.data：格式化后的数据源
- this.options：实例的参数