Layui select配合input實(shí)現(xiàn)可輸入,可選擇,可搜索,支持異步加載,遠(yuǎn)程搜索,也可以本地data直接賦值,主要使用場(chǎng)景是select框可以自己輸入,就是在下拉列表里找不到自己想要的選項(xiàng)就可以自己輸入,同時(shí)還要支持模糊匹配功能,數(shù)據(jù)源可以從本地賦值,也可以異步url請(qǐng)求加載,或者直接遠(yuǎn)程請(qǐng)求聯(lián)想
<div id="test"></div>
// 模塊加載的機(jī)制不明白的或者加載不進(jìn)來(lái)的,請(qǐng)參考layui官方文檔或者自行百度
layui.config({ base: 'js/modules/' }).extend({
selectInput: 'selectInput/selectInput'
}).use(['form', 'selectInput'], function() {
var $ = layui.$, form = layui.form, selectInput= layui.selectInput;
var ins = selectInput.render({
// 容器id,必傳參數(shù)
elem: '#test1',
name: 'test', // 渲染的input的name值
initValue:'iPhone12 Pro Max', // 渲染初始化默認(rèn)值
placeholder: '請(qǐng)輸入名稱', // 渲染的inputplaceholder值
// 聯(lián)想select的初始化本地值,數(shù)組格式,里面的對(duì)象屬性必須為value,name,value是實(shí)際選中值,name是展示值,兩者可以一樣
data: [
{value: 1111, name: 1111},
{value: 2333, name: 2222},
{value: 2333, name: 2333},
{value: 2333, name: 2333},
],
url: "https://www.layui.com/", // 異步加載的url,異步加載聯(lián)想詞的數(shù)組值
remoteSearch: false,// 是否啟用遠(yuǎn)程搜索 默認(rèn)是false,和遠(yuǎn)程搜索回調(diào)保存同步
// 解析回調(diào),如果你的異步返回的data不是上述的data格式,請(qǐng)?jiān)诖嘶卣{(diào)格式成對(duì)應(yīng)的數(shù)據(jù)格式,回調(diào)參數(shù)是異步加載的數(shù)據(jù)
parseData: function (data) {
},
error: function (error) { // 異步加載出錯(cuò)的回調(diào) 回調(diào)參數(shù)是錯(cuò)誤msg
},
done: function (data) { // 異步加載成功后的回調(diào) 回調(diào)參數(shù)加載返回?cái)?shù)據(jù)
},
remoteMethod: function (value, cb) { // 遠(yuǎn)程搜索的回調(diào)函數(shù)
// value 是input實(shí)施輸入的value值
// cb是回調(diào)處理函數(shù),請(qǐng)?jiān)趫?zhí)行ajax搜索請(qǐng)求成功之后執(zhí)行此回調(diào)函數(shù)
//案例
//這里如果val為空, 則不觸發(fā)搜索
if (!value) {
return cb([]);
}
//這里的$.ajax去請(qǐng)求后臺(tái)拿回?cái)?shù)據(jù)
$.ajax({
method: 'get',
url: 'https://www.fastmock.site/mock/98228b1f16b7e5112d6c0c87921eabc1/xmSelect/search',
data: {
keyword: val,
},
success: function (data) {
return cb(data)
}
})
}
}
});
// 監(jiān)聽(tīng)input 實(shí)時(shí)輸入事件
ins.on('itemInput(test1)', function (obj) {
console.log(obj);
});
// 監(jiān)聽(tīng)select 選擇事件
ins.on('itemSelect(test1)', function (obj) {
console.log(obj);
});
// 如果使用本地?cái)?shù)據(jù)加載,不要使用設(shè)置遠(yuǎn)程 url參數(shù) 也不要將remoteSearch參數(shù)設(shè)置為 true,完整的本地賦值數(shù)據(jù)案例
var ins2 = selectInput.render({
elem: '#test1',
data: [
{value: 1111, name: 1111},
{value: 2333, name: 2222},
{value: 2333, name: 2333},
{value: 2333, name: 2333},
],
placeholder: '請(qǐng)輸入名稱',
name: 'list_common',
remoteSearch: false
});
// 這是我項(xiàng)目中的需求做的一個(gè)組件,可能存在一些問(wèn)題,如果有問(wèn)題可以聯(lián)系我,也可以去碼云提問(wèn),有時(shí)間我會(huì)去看的,會(huì)盡量完善這個(gè)組件的
// 2020-10-23 更新:允許value和name值不同,顯示用name,取值用value;新增參數(shù)initValue,設(shè)置input默認(rèn)初始值
});