下拉框搜索功能

方法1-基于bootstrap-select框架

html代码

普通的select标签即可，但是要加上属性：

data-live-search="true"

---

代码示例

<div class="col-md-2">
    <div class="form-group">
        <label>品牌</label>
        <select class="form-control selectpicker" id="isBrandName" name="isBrandName" data-live-search="true" >
        </select>
    </div>
</div>

js代码

$("#isBrandName").selectpicker('refresh');

主要是selectpicker方法，一行代码搞定

---

完整代码

/**
 * 初始化获取车辆品牌并使用 Select2
 */
function getVehBrands() {
    $.ajax({
        type: "POST",
        url: "/vehicle/getVehBrands.do",
        dataType: "json",
        success: function (callbackData) {
            if (callbackData.errcode == 0) {
                var list = callbackData.data;
                // var html = ""; // 不再添加“请选择”选项
                var html = "<option value=''>请选择</option>"; // 确保有一个空选项
                if (list.length > 0) {
                    for (var i = 0; i < list.length; i++) {
                        var item = list[i];
                        html += "<option value='" + item.vehicleBrandName + "'>" + item.vehicleBrandName + "</option>";
                    }
                }
                $("#isBrandName").html(html);
                $("#isBrandName").selectpicker('refresh');
            } else {
                alert(callbackData.message);
            }
        },
        error: function () {
            alert("服务器异常!请联系管理员");
        }
    });
}

方法2-基于select2框架

html代码

普通的select标签即可

---

示例代码

<div class="col-md-2">
    <div class="form-group">
        <label>品牌</label>
        <select class="form-control" id="isBrandName">
        </select>
    </div>
</div>

js代码

核心代码：

// 初始化 Select2
                $("#isBrandName").select2({
                    placeholder: '请选择品牌',   // 设置占位符
                    allowClear: true            // 启用清除功能
                });

主要是select2方法，一行代码搞定

---

完整示例

/**
 * 初始化获取车辆品牌并使用 Select2
 */
function getVehBrands() {
    $.ajax({
        type: "POST",
        url: "/vehicle/getVehBrands.do",
        dataType: "json",
        success: function (callbackData) {
            if (callbackData.errcode == 0) {
                var list = callbackData.data;
                // var html = ""; // 不再添加“请选择”选项
                var html = "<option value=''>请选择</option>"; // 确保有一个空选项
                if (list.length > 0) {
                    for (var i = 0; i < list.length; i++) {
                        var item = list[i];
                        html += "<option value='" + item.vehicleBrandName + "'>" + item.vehicleBrandName + "</option>";
                    }
                }
                $("#isBrandName").html(html);

                // 初始化 Select2
                $("#isBrandName").select2({
                    placeholder: '请选择品牌',   // 设置占位符
                    allowClear: true            // 启用清除功能
                });
            } else {
                alert(callbackData.message);
            }
        },
        error: function () {
            alert("服务器异常!请联系管理员");
        }
    });
}

总结

2种不同的方案，不同的框架

之间没有任何关系

选择其中一种即可