input动态搜索下拉框
环境 : 后台页面用的是layui.js
要求 : input动态搜索下拉框
引用插件 :
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/select2.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/select2.min.js"></script>
页面 input 的代码 :
<div class="layui-form-item">
<label class="layui-form-label">选择代理商</label>
<div class="layui-input-block">
<select lay-ignore class="proxys" name="proxy_id" style="width: 100%;height: 36px;">
</select>
</div>
</div>
渲染数据代码 :
$('.proxys').select2({
ajax: {
url: '{:url("/index/task_proxy/data")}',
type: 'POST',
dataType: 'json',
placeholder: '直接选择或搜索选择',
data: function (val) {
return {
listtype: 3,
search_all_url: val.term
};
},
processResults: function (data) {
var options = new Array();
$(data.data).each(function (i, v) {
options.push({
id: v.id,
text: v.name
});
});
return {
results: options
};
}
}
});
页面效果 :