jQuery Combox Select 簡介

jQuery Combox Select 是基于 jQuery 實現的一個下拉選擇框插件。它能夠將一個普通的下拉選擇框轉換成一個可搜索的、可自動補齊匹配的、可多選的選擇框。它不僅具有靈活的配置選項，還可以方便地與服務器端進行數據交互。

jQuery Combox Select 的使用

1. 引入 jQuery 庫和 Combox Select 插件庫

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery.combo.select/1.0.7/jquery.combo.select.min.js"></script>

2. 添加 HTML 代碼

<select id="my-select">
<option value="1">北京</option>
<option value="2">上海</option>
<option value="3">廣州</option>
<option value="4">深圳</option>
<option value="5">杭州</option>
</select>

3. 初始化 Combox Select

<script>
$(function() {
$('#my-select').comboSelect();
});
</script>

4. 配置參數

可以通過傳遞一個 options 對象來配置 Combox Select。例如，以下代碼將 Combox Select 的搜索功能關閉：

<script>
$(function() {
$('#my-select').comboSelect({
search: false
});
});
</script>

5. 通過 AJAX 加載數據

Combox Select 還支持通過 AJAX 加載數據。以下代碼演示了如何從服務器端動態加載數據：

<script>
$(function() {
$('#my-select').comboSelect({
source: function(query, callback) {
$.ajax({
url: 'http://example.com/api/data',
dataType: 'json',
data: {
q: query
},
success: function(data) {
callback(data);
}
});
}
});
});
</script>

總結

使用 Combox Select 可以讓下拉選擇框更加靈活和易用。可以根據實際需求來配置 Combox Select，實現自動補齊、搜索、多選、異步加載等功能。