自動完成下拉框 Select2 關鍵字搜索的實例（本地數據與異步獲取）

最終效果

首先咱們要有一個基礎的文本框

<input name="test" type="hidden" id="userSelect" style="width: 600px" value="上海^漳州" />

使用本地數據的寫法

$('#userSelect').select2({
    placeholder          : "請輸入",
    minimumInputLength   : 1,
    multiple             : true,
    separator            : "^",                             // 分隔符
    maximumSelectionSize : 5,                               // 限制數量
    initSelection        : function (element, callback) {   // 初始化時設置默認值
        var data = [];
        $(element.val().split("^")).each(function () {
            data.push({ id: this, text: this });
        });
        callback(data);
    },
    createSearchChoice   : function(term, data) {           // 建立搜索結果（使用戶能夠輸入匹配值之外的其它值）
        return { id: term, text: term };
    },
    formatSelection : function (item) { return item.id; },  // 選擇結果中的顯示
    formatResult    : function (item) { return item.id; },  // 搜索列表中的顯示
    data: {
        results: [
            { id: "北京", text: "bj beijin 北京" },
            { id: "廈門", text: "xm xiamen 廈門" },
            { id: "福州", text: "fz fuzhou 福州" }
        ]
    }
});

使用異步數據的寫法

腳本

$('#userSelect').select2({
    placeholder          : "請輸入",
    minimumInputLength   : 1,
    multiple             : true,
    separator            : "^",                             // 分隔符
    maximumSelectionSize : 5,                               // 限制數量
    initSelection        : function (element, callback) {   // 初始化時設置默認值
        var data = [];
        $(element.val().split("^")).each(function () {
            data.push({id: this, text: this});
        });
        callback(data);
    },
    createSearchChoice   : function(term, data) {           // 建立搜索結果（使用戶能夠輸入匹配值之外的其它值）
        return { id: term, text: term };
    },
    formatSelection : function (item) { return item.id; },  // 選擇結果中的顯示
    formatResult    : function (item) { return item.id; },  // 搜索列表中的顯示
    ajax : {
        url      : "test-api",              // 異步請求地址
        dataType : "json",                  // 數據類型
        data     : function (term, page) {  // 請求參數（GET）
            return { q: term };
        },
        results      : function (data, page) { return data; },  // 構造返回結果
        escapeMarkup : function (m) { return m; }               // 字符轉義處理
    }
});

服務端（這裏以 Laravel 爲例）

Route::get('test-api', function () {

    $q = Input::get('q');

    // do something ...

    return array(
        // 'more' => false,
        'results' => array(
            array('id' => '北京', 'text' => 'bj beijin 北京'),
            array('id' => '廈門', 'text' => 'xm xiamen 廈門'),
            array('id' => '福州', 'text' => 'fz fuzhou 福州'),
        ),
    );

});