欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

关于autocomplete.js 无法匹配多个字段生成下拉

程序员文章站 2022-06-07 15:57:33
...

关于autocomplete.js 无法匹配多个字段生成下拉

前一段时间做过一个项目,需要根据用户所填写字段进行匹配,由于当时使用的是autocomplete.js,对其中比较坑的地方做下记录。

官方文档:(http://xdsoft.net/jqplugins/autocomplete/),目前市面上存在较多版本,请查看是否与本文版本一致在参考下文


返回值如下

[{"last_name":"Administrator","user_name":"test1"},
{"last_name":"\u9648\u6587\u6770","user_name":"test22"},
{"last_name":"\u5047\u6fd2\u4e39","user_name":"test23"},
{"last_name":"\u6797\u5b56\u6986","user_name":"test2"},
{"last_name":"\u6797\u5b56\u6986","user_name":"test3"}]

这里说下当时需求场景,是需要根据用户输入user_name进行匹配的,写法如下

$('.recommenderName').autocomplete({
        limit: 5,
        visibleLimit: 5,
        valueKey: 'user_name',
        appendMethod: 'replace',
        getTitle: function(row){
            return row["last_name"]+'-'+row["user_name"];
        },
        source:[
            {
                url: GlobalData.url + '/getCrmSalesList',
                type: 'remote',
                data: function(q) {
                    return {
                        uname: $('.recommenderName').val(),
                        user_name : q
                    }
                }
            }
        ]
   }).on('dblclick',function(){
        $(this).trigger('updateContent');
    }).on('selected.xdsoft',function(e,row){
        $(this).val(row['user_name']);
    })

值得注意的是,上述代码段valueKey,autocomplete会根据请求返回值生成相对应的html

<div class="xdsoft_autocomplete_dropdown" style="left: 0px; top: 34px; margin-left: 0px; margin-right: 0px; width: 278px; display: none; max-height: 130px;">
  <div data-value="shaojun.huang" style="padding-left: 5px; padding-right: 5px;">Administrtor - test1</div>
  <div data-value="test22" style="padding-left: 5px; padding-right: 5px;">陈文杰 - test22</div>
  <div data-value="test23" style="padding-left: 5px; padding-right: 5px;">假濒丹 - test23</div>
  <div data-value="shaojun.huang" style="padding-left: 5px; padding-right: 5px;">林孖榆 - test2</div>
  <div data-value="shaojun.huang" style="padding-left: 5px; padding-right: 5px;">jierui.feng - test3</div></div>

不难发现data-value的值就为vakuekey的所选择字段值,实际上autocomplete正是根据data-value进行匹配的

之后,产品要求将匹配的字段变成user_name 和 last_name两种都需要,经过查找大量资料和某为同学的帮助,最后得到解发,上代码

    $('.recommenderName').autocomplete({
        valueKey: 'searchText',
        appendMethod: 'replace',
        getTitle: function(row){
            return row["last_name"]+'-'+row["user_name"];
        },
        source:[
            function(q,add){
                 $.post(GlobalData.url + '/getCrmSalesList',{uname: $('.recommenderName').val()},function(data){
                    data = JSON.parse(data);
                    data = $.isArray(data) ? data : [];
                    $(data).each(function(){
                        console.log(this);
                        this.searchText = this.last_name + ' - ' + this.user_name
                    })
                    add(data);
                })
            }
        ]
   }).on('dblclick',function(){
        $(this).trigger('updateContent');
    }).on('selected.xdsoft',function(e,row){
        $(this).val(row['user_name']);
    })

这里的关键在于add()方法和valueKey的取值,add()方法是插件内部方法,使用方法参照文章开头官方文档,这样一来问题成功解决。