Jquery 如何使用select2构建标记功能?
我想使用Jquery 如何使用select2构建标记功能?,jquery,jquery-select2,Jquery,Jquery Select2,我想使用select2构建一个用户tag函数。有了它,我们可以向用户添加标签。它实现以下功能: 键入标记时,使用ajax在数据库中搜索单词并列出匹配结果 我们可以选择结果快速添加标签 我们还可以按enter键添加数据库中不存在的新标记 提交时,我们只需提交自己的标签 但是,使用作者网站中的示例,我只能获得标记或ajax搜索。我不能把它们结合在一起 谁能给我一些建议吗 我看不出有什么问题。在github示例中,我刚刚将multiple=“multiple”属性添加到select,我有ajax+标记
select2
构建一个用户tag
函数。有了它,我们可以向用户添加标签。它实现以下功能:
键入标记时,使用ajax在数据库中搜索单词并列出匹配结果李>
我们可以选择结果快速添加标签李>
我们还可以按enter键添加数据库中不存在的新标记
提交时,我们只需提交自己的标签
但是,使用作者网站中的示例,我只能获得标记
或ajax
搜索。我不能把它们结合在一起
谁能给我一些建议吗 我看不出有什么问题。在github示例中,我刚刚将multiple=“multiple”
属性添加到select
,我有ajax+标记功能。
此外,我还添加了tags:true
选项,允许用户创建自己的标记
HTML:
<select class="js-data-example-ajax" multiple="multiple">
</select>
$(".js-data-example-ajax").select2({
tags:true,
ajax: {
url: "https://api.github.com/search/repositories",
dataType: 'json',
delay: 250,
data: function (params) {
return {
q: params.term, // search term
page: params.page
};
},
processResults: function (data, page) {
var newData = [];
$.each(data.items, function (index, item) {
newData.push({
id: item.id //id part present in data
, text: item.name //string to be displayed
});
});
return { results: newData };
},
cache: true
},
escapeMarkup: function (markup) { return markup; }, // let our custom formatter work
minimumInputLength: 1
});
还请注意,我修改了processResults
函数,以使其在JSFIDLE中工作
下面是一个工作示例:我看不出有任何问题。在github示例中,我刚刚将multiple=“multiple”
属性添加到select
,我有ajax+标记功能。
此外,我还添加了tags:true
选项,允许用户创建自己的标记
HTML:
<select class="js-data-example-ajax" multiple="multiple">
</select>
$(".js-data-example-ajax").select2({
tags:true,
ajax: {
url: "https://api.github.com/search/repositories",
dataType: 'json',
delay: 250,
data: function (params) {
return {
q: params.term, // search term
page: params.page
};
},
processResults: function (data, page) {
var newData = [];
$.each(data.items, function (index, item) {
newData.push({
id: item.id //id part present in data
, text: item.name //string to be displayed
});
});
return { results: newData };
},
cache: true
},
escapeMarkup: function (markup) { return markup; }, // let our custom formatter work
minimumInputLength: 1
});
还请注意,我修改了processResults
函数,以使其在JSFIDLE中工作
下面是一个工作示例: