代码拉取完成,页面将自动刷新
<div class="layui-form layui-row layui-col-space16" id="is_body">
<div class="layui-col-md6">
<select lay-search="" lay-filter="demo-select-filter" class="inputandsearch">
<option value="">请选择或搜索(默认不区分大小写)</option>
<option value="1">AAA</option>
<option value="2">aaa</option>
<option value="3">BBB</option>
<option value="4">bbb</option>
<option value="5">ABC</option>
<option value="6">abc</option>
<option value="7">AbC</option>
</select>
</div>
</div>
<script>
layui.use(function(){
var form = layui.form;
var layer = layui.layer;
var $ = layui.$
var id = 'is_body'
// 监听inputvalue
$('#' + id + '').on('input', '.inputandsearch + .layui-form-select .layui-select-title input', function (event) {
var input = $(this)
var inputvalue = input.val();
let 根节点 = input.parent().parent().parent()
let 假下拉容器 = 根节点.find('dl')
// 判断是否有匹配选项 没有就显示inputvalue
if (假下拉容器.find('.layui-select-none').length > 0) {
if (假下拉容器.find('.is_select_text').length > 0) {
假下拉容器.find('.is_select_text').text(inputvalue)
假下拉容器.find('.is_select_text').attr('lay-value', inputvalue)
} else {
假下拉容器.prepend(`<dd lay-value="${inputvalue}" class="is_select_text">${inputvalue}</dd>`)
}
}
});
// 监听自定义选项被选中
$('#' + id + '').on('click', '.is_select_text', function () {
let inputvalue = $(this).attr('lay-value')
let 根节点 = $(this).parent().parent().parent()
let 真下拉容器 = 根节点.find('select')
layer.msg(inputvalue); // this 为当前选中 <option> 元素对象
真下拉容器.append(`<option value="${inputvalue}">${inputvalue}</option>`)
真下拉容器.val(inputvalue);
form.render('select')
});
// select 事件
form.on('select(demo-select-filter)', function(data){
var elem = data.elem; // 获得 select 原始 DOM 对象
var value = data.value; // 获得被选中的值
var othis = data.othis; // 获得 select 元素被替换后的 jQuery 对象
layer.msg(this.innerHTML + ' 的 value: '+ value); // this 为当前选中 <option> 元素对象
});
});
</script>
有个inputSelect插件可以搜索也可以输入
试过了不一样
此处可能存在不合适展示的内容,页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容,可点击提交进行申诉,我们将尽快为您处理。
select 组件的定位就是只能赋值选项列表中的值,包括搜索,也只是从选项中匹配。
若要支持自定义输入的值,可以借助 input + dropdown 组件来自定义实现哦。
登录 后才可以发表评论