需求:chosen搜索框可以根据输入的内容,动态的调用接口,动态的加载下拉框,并可以匹配搜索下拉框的中的列表
1. 下拉框先声明chosen属性
注:下拉框必须要有一个option,否则搜索框不可以输入

2.选中搜索框 使用 on 绑定 input方法,调用接口
// 选中 搜索框
$('.chosen-search input').on('input', function () {
var flag = false;
// 允许输入汉字 2~23位
if (/^[\u4e00-\u9fa5]{2,23}$/.test($(this).val())) {
flag = true;
}
// 允许输入数字和字母组合 ==4
if (/^(?!^[a-zA-Z]+$)[0-9a-zA-Z]{4}$/.test($(this).val())) {
flag = true;
}
if (flag) {
// 获取下拉框值
let val = $('.chosen-search input').val();
let html = '<option></option>';
// 当输入内容长度大于2的汉字或者 长度等于4位数字加字母 input不可以再输入 避免重复调用接口
$('.chosen-search input').attr('readonly', true);
$.post(“接口", function (data) {
$(".orgCode_select").children().remove();
for (var i = 0; i < data.resDatas.length; i++) {
html += '<option>你好 </option>';// 根据返回值填写
}
// 添加到下拉框中
$(".orgCode_select").html(html).trigger("chosen:updated");
//选择框重新被添加下拉框,则输入框的值清空;
// 将之前输入的值放入 输入框 可直接搜索
$('.chosen-search input').val(val);
// 解除
$('.chosen-search input').removeAttr('readonly');
})
}
});
本文介绍如何利用Jquery Chosen插件创建一个动态搜索框,它能根据输入内容实时调用接口,加载并匹配下拉列表。首先,确保下拉框设置为chosen属性,且至少包含一个option。接着,通过监听input事件来触发接口调用,实现实时搜索功能。
4718

被折叠的 条评论
为什么被折叠?



