select2的輸入可下拉(modal框)--gxy
阿新 • • 發佈:2019-02-03
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{
}
}
});
}
效果圖:
選擇以後會自動把後面的電話隱藏掉