element ui input el-autocomplete

产品大佬嫌select的远程搜索光标不能单个编辑，于是乎提了要把光标变成单个编辑而不是全选这个需求，我先参考同事的建议想到了手动在focus之后控制触发键盘右键，然后又想到修改element封装源代码，两个解决办法都不靠谱，转了一圈之后发现input也有远程搜索建议功能 ，又在fetch-suggestions参数上踩了很久的坑， 浪费一上午的时间 ，上代码吧 ，希望自己能长记性

html

---

<el-autocomplete

                            class="inline-input"

                            v-model="s_girard"

                            :fetch-suggestions="remoteMethodGirard"

                            placeholder="请输入款号"

                            :trigger-on-focus="false"

                            size="small"

                            :loading="loading"

                            id="1"

                            ></el-autocomplete>

---

js：

remoteMethodGirard(query,cb){

                    let results = [{}]

                    this.s_girard = query;

                    let self = this

                    this.loading = true;

                    $.ajax({

                        headers: {

                            'X-CSRF-TOKEN': $('meta[name="csrf_token"]').attr('content')

                        },

                        type: 'get',

                        url: '/admin/get-giard-key',

                        data: {

                            girard:query

                        },

                        success:function(data){

                            if(data.result.success){

                                setTimeout(() => {

                                    self.loading = false;

                                    results = data.content

                                    for(i of results){

                                        i.value = i.girard

                                    }

                                        cb(results);

                                }, 200);

                        }

                        }

                        });

                },

值得注意的是：fetch-suggestions 返回参数是queryString, callback（上面的cb）通过调用 callback(data:[]) 来返回。

为什么选择input组件群下的el-autocomplete 而不是select下的远程搜索?

因为点击选中时可获取到选中行的附带信息即一个对象, 而select组件下的远程搜索只能选中点击的字符串.

最最需要注意：

后台获取的数组中每一个对象必须要有一个value字段, 因为autocomplete只识别value字段并在下拉列中显示（这个我真的ctmd找了很久的bug，感谢度娘，感谢大佬原文章https://blog.csdn.net/qq_37746973/article/details/78402812）

js也可以参考大佬的高端axios

//queryString 为在框中输入的值

//callback 回调函数,将处理好的数据推回

querySearchAsync(queryString, callback) {

    var list = [{}];

    //调用的后台接口

    let url = 后台接口地址 + queryString;

    //从后台获取到对象数组

    axios.get( url ).then((response)=>{

        //在这里为这个数组中每一个对象加一个value字段, 因为autocomplete只识别value字段并在下拉列中显示

        for(let i of response.data){

            i.value = i.想要展示的数据;  //将想要展示的数据作为value

        }

        list = response.data;

        callback(list);

    }).catch((error)=>{

    console.log(error);

    });

}