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

关于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()方法是插件内部方法，使用方法参照文章开头官方文档，这样一来问题成功解决。