ajax异步查询下拉框,自动完成下拉框 Select2 关键字搜索的实例（本地数据与异步获取）...

最终效果

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

使用本地数据的写法

$('#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 福州'),

),

);

});