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:实例的参数