首页 > 代码库 > 自动完成下拉框 Select2 关键字搜索的实例(本地数据与异步获取)

自动完成下拉框 Select2 关键字搜索的实例(本地数据与异步获取)

最终效果

最终效果1
最终效果2

首先我们要有一个基础的文本框

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

使用本地数据的写法

$(‘#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 = http://www.mamicode.com/[];> 

服务端(这里以 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 福州‘),
        ),
    );

});

自动完成下拉框 Select2 关键字搜索的实例(本地数据与异步获取)