select2的输入可下拉（modal框）--gxy

- 日理万妓 2022-06-02 00:52 539阅读 0赞

html：

js：

$(function () { 
        /在模态框中使用select2，这句话是必须的
            $.fn.modal.Constructor.prototype.enforceFocus = function () {  }
    
            //初始化客户输入框
            searchUserName();
    }
    
    
    //根据输入名称查询，必须在二个字符以上时才开始进行查询工作
        function searchUserName(){ 
    
            var mainInput = $('#cusName');
            mainInput.empty();
            mainInput.select2({
                placeholder:'请选择',
                allowClear:true,
                ajax: {
                    url:  CONSTANT_SETTING.DOMAIN + "/importantCustomer/queryInfoByName",
                    dataType: 'json',
                    type : 'get',
                    delay: 250,
                    cache: true,
                    minimumInputLength : 2,//最小需要输入多少个字符才进行查询
                    data: function (params) { 
                        return {
                            customerName: params.term, //输入框输入的值
                            access_token: getAccessToken(),
                            factoryId : selectedfactory
                        };
                    },
                    processResults: function (res) { 
                        //返回的数据拼接显示在前端下拉框里
                        var pojo = res.data;
                        var result = [];
                        if(res.success && pojo.length>0){
    
                            for(var i =0;i<pojo.length;i++){
    
                                var po = pojo[i];
                                result.push({
       'id':po.id,'text':po.customername+"("+po.phonename+")"});
    
                            }
    
                        }
                        return {
                          results: result
                        };
                      }
                }
    
            });
    
        }

再根据查询出来的ID再查询信息然后再赋值其他标签中去：  
（这步我老觉得一定有什么方法可以把上步已经查询出来的实体类信息在这里复用。求各位大神指点？欢迎下方评论指点，我会实时关注，谢谢！）

效果图：

选择以后会自动把后面的电话隐藏掉

![选择以后会自动把后面的电话隐藏掉][SouthEast]

[SouthEast]: /images/20220602/5a9af1b34dee44dfaffd25357c329b5e.png