本文主要是介绍select2的输入可下拉(modal框)--gxy,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!
html:
<div class="form-group col-md-6 spanBox"><span>顾客名字</span><input type="text" name="usename" id="cunameValue" val="" style="display: none;"/><select id="cusName" data-placeholder="请输入顾客姓名" style="width:45%;" name="usename" class="form-control select2" onchange="getValue(this)"></select></div>
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再查询信息然后再赋值其他标签中去:
(这步我老觉得一定有什么方法可以把上步已经查询出来的实体类信息在这里复用。求各位大神指点?欢迎下方评论指点,我会实时关注,谢谢!)
function getValue(t){var id = t.value;$.ajax({type : 'get',url : CONSTANT_SETTING.DOMAIN + "/importantCustomer/queryInfoById",dataType : 'json',async: false,data : {id : id,access_token: getAccessToken()},success : function(res){if(res.success){var pojo = res.data.bcm;$('#cusName').next().find('span').find('span').text(pojo.customername);$('#cunameValue').val(pojo.customername);$('#cusPhone').val(pojo.phonename);$('#cusRank').val(pojo.joblevel);$('#cusHobby').val(pojo.hobby);$('#marketType').val(pojo.belongmarket);$('#companyType').val(pojo.belongcompany);$('#userBirth').val(pojo.birthday);$('#birthHabit').val(pojo.borthdayhabit);$('#familyMber').val(pojo.homemate);$('#userTaboo').val(pojo.selftaboo);}else{}} });}
效果图:
选择以后会自动把后面的电话隐藏掉
这篇关于select2的输入可下拉(modal框)--gxy的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!