Autocomplete 自动完成

使用说明

本框架已经弃用awsomplete插件,而改为基于fuse.js的自主编写的自动完成(自动补全)插件。本插件有如下特点:

  • 使用方便:对input使用axComplete属性和list属性即可弃用自动完成功能。
  • 高亮显示:对匹配字符予以高亮显示。
  • 待检索列表:对input没有做任何输入的时候可打开待检索的列表。
  • 自定义提示位置:检索结果可存放在任意位置,默认是在popup里。
  • 模糊检索:基于fuse.js的检索阈值进行模糊检索。

使用方法

插件运行方式有两种:

  • ax*属性:对input标签使用axComplete属性和list属性即可按默认参数运行插件。
  • js实例:通过new axComplete('#ID',{list:[]})方式创建实例运行。

对input使用list属性列举下拉菜单选项,用英文逗号隔开。

名称
输入a看看!
名称
  •                                         <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属性,以独立形式引用选项。

名称
输入a看看!
                        <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:""}],带一级对象的数组,
名称
输入a看看!
  •                                     <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数据源
输入a看看!
  •                                         <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数据源
输入a看看!
  •                                         <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。

名称
输入a看看!
                                <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。

名称
输入a看看!
                            <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>
                            

监听事件

借鉴jQuery的写法,本插件有若干监听方法,格式是:instance.on('event',function(){});具体事件说明如下:

  • selected 点选项目后执行,有一个参数:当前选择的项,是至少包含id、name和value的对象

演示实例使用console方法,请用F12打开浏览器控制台查看监听结果。

名称
输入a看看!
  •                                     <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
      });
});
                        

操作方法

名称 说明 参数说明 回调函数
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:实例的参数