Jquery chosen 类似百度动态搜索可输入汉字和数字字母

本文链接：https://blog.youkuaiyun.com/start_f_scratch/article/details/103005074

本文介绍如何利用Jquery Chosen插件创建一个动态搜索框，它能根据输入内容实时调用接口，加载并匹配下拉列表。首先，确保下拉框设置为chosen属性，且至少包含一个option。接着，通过监听input事件来触发接口调用，实现实时搜索功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

需求：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');
        })
    }
});