blocks|key|202738|text|您可以通过让ajax函数也返回搜索词作为结果列表中的第一个结果来实现这一点。然后，用户可以选择该结果作为标签。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|202739|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|D|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|E|8|@]|9|@]|A|$]]]|C|$]]

You can make this work, by having your ajax function also return the search term, as the first result in the result list. The user can then select that result as a tag.

blocks|key|3047312|text|Select2有“createSearchChoice”函数：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3047313|3047314|从用户的搜索词中创建一个新的可选选项。允许创建通过查询功能不可用的选项。当用户可以动态创建选项时非常有用，例如“标签”用例。|blockquote|3047315|3047316|3047317|您可以使用以下命令来实现您想要的功能：|3047318|createSearchChoice:function(term,+data)+{
++if+($(data).filter(function()+{
++++return+this.text.localeCompare(term)===0;
++}).length===0)+{
++++return+{id:term,+text:term};
++}
},
multiple:+true|code-block|syntax|javascript|3047319|下面是一个更完整的答案，它将JSON结果返回给ajax搜索，如果该术语没有返回任何结果，则允许从该术语创建标签：|3047320|$(".select2").select2({
++tags:+true,
++tokenSeparators:+[",",+"+"],
++createSearchChoice:+function(term,+data)+{
++++if+($(data).filter(function()+{
++++++return+this.text.localeCompare(term)+===+0;
++++}).length+===+0)+{
++++++return+{
++++++++id:+term,
++++++++text:+term
++++++};
++++}
++},
++multiple:+true,
++ajax:+{
++++url:+'/path/to/results.json',
++++dataType:+"json",
++++data:+function(term,+page)+{
++++++return+{
++++++++q:+term
++++++};
++++},
++++results:+function(data,+page)+{
++++++return+{
++++++++results:+data
++++++};
++++}
++}
});|3047321|entityMap^0|0|0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|U|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|V|8|@]|9|@]|A|$]]|$1|C|3|D|5|E|7|W|8|@]|9|@]|A|$]]|$1|F|3|-4|5|6|7|X|8|@]|9|@]|A|$]]|$1|G|3|-4|5|6|7|Y|8|@]|9|@]|A|$]]|$1|H|3|I|5|6|7|Z|8|@]|9|@]|A|$]]|$1|J|3|K|5|L|7|10|8|@]|9|@]|A|$M|N]]|$1|O|3|P|5|6|7|11|8|@]|9|@]|A|$]]|$1|Q|3|R|5|L|7|12|8|@]|9|@]|A|$M|N]]|$1|S|3|-4|5|6|7|13|8|@]|9|@]|A|$]]]|T|$]]

Select2 has the function "createSearchChoice":

<blockquote>
 Creates a new selectable choice from user's search term. Allows
 creation of choices not available via the query function. Useful when
 the user can create choices on the fly, eg for the 'tagging' usecase.
</blockquote>

You could achieve what you want by using:

<pre><code>createSearchChoice:function(term, data) {
 if ($(data).filter(function() {
 return this.text.localeCompare(term)===0;
 }).length===0) {
 return {id:term, text:term};
 }
},
multiple: true
</code></pre>

Here's a more complete answer that returns a JSON result to an ajax search, and allows tags to be created from the term, if the term returned no results:

<pre><code>$(".select2").select2({
 tags: true,
 tokenSeparators: [",", " "],
 createSearchChoice: function(term, data) {
 if ($(data).filter(function() {
 return this.text.localeCompare(term) === 0;
 }).length === 0) {
 return {
 id: term,
 text: term
 };
 }
 },
 multiple: true,
 ajax: {
 url: '/path/to/results.json',
 dataType: "json",
 data: function(term, page) {
 return {
 q: term
 };
 },
 results: function(data, page) {
 return {
 results: data
 };
 }
 }
});
</code></pre>

blocks|key|199884|text|createSearchChoice+:+function+(term)+{+return+{id:+term,+text:+term};+}|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|199885|只需添加此选项项|unstyled|199886|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$B|C]]|$1|D|3|E|5|F|7|J|8|@]|9|@]|A|$]]|$1|G|3|-4|5|F|7|K|8|@]|9|@]|A|$]]]|H|$]]

<pre><code>createSearchChoice : function (term) { return {id: term, text: term}; }
</code></pre>

just add this option item

blocks|key|3047386|text|选择v4|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3047387|http://jsfiddle.net/8qL47c1x/2/|offset|length|3047388|HTML：|3047389|<select+multiple="multiple"+class="form-control"+id="tags"+style="width:+400px;">
++++<option+value="tag1">tag1</option>
++++<option+value="tag2">tag2</option>
</select>|code-block|syntax|javascript|3047390|JavaScript：|3047391|$('#tags').select2({
++++tags:+true,
++++tokenSeparators:+[','],
++++ajax:+{
++++++++url:+'https://api.myjson.com/bins/444cr',
++++++++dataType:+'json',
++++++++processResults:+function(data)+{
++++++++++return+{
++++++++++++results:+data
++++++++++}
++++++++}
++++},

++++//+Some+nice+improvements:

++++//+max+tags+is+3
++++maximumSelectionLength:+3,

++++//+add+"(new+tag)"+for+new+tags
++++createTag:+function+(params)+{
++++++var+term+=+$.trim(params.term);

++++++if+(term+===+'')+{
++++++++return+null;
++++++}

++++++return+{
++++++++id:+term,
++++++++text:+term+%2B+'+(new+tag)'
++++++};
++++},
});|3047392|选择v3.5.2|3047393|有一些改进的例子：|3047394|http://jsfiddle.net/X6V2s/66/|3047395|html：|3047396|<input+type="hidden"+id="tags"+value="tag1,tag2"+style="width:+400px;">|3047397|js：|3047398|$('#tags').select2({
++++tags:+true,
++++tokenSeparators:+[','],
++++createSearchChoice:+function+(term)+{
++++++++return+{
++++++++++++id:+$.trim(term),
++++++++++++text:+$.trim(term)+%2B+'+(new+tag)'
++++++++};
++++},
++++ajax:+{
++++++++url:+'https://api.myjson.com/bins/444cr',
++++++++dataType:+'json',
++++++++data:+function(term,+page)+{
++++++++++++return+{
++++++++++++++++q:+term
++++++++++++};
++++++++},
++++++++results:+function(data,+page)+{
++++++++++++return+{
++++++++++++++++results:+data
++++++++++++};
++++++++}
++++},

++++//+Take+default+tags+from+the+input+value
++++initSelection:+function+(element,+callback)+{
++++++++var+data+=+[];

++++++++function+splitVal(string,+separator)+{
++++++++++++var+val,+i,+l;
++++++++++++if+(string+===+null+%7C%7C+string.length+<+1)+return+[];
++++++++++++val+=+string.split(separator);
++++++++++++for+(i+=+0,+l+=+val.length;+i+<+l;+i+=+i+%2B+1)+val[i]+=+$.trim(val[i]);
++++++++++++return+val;
++++++++}

++++++++$(splitVal(element.val(),+",")).each(function+()+{
++++++++++++data.push({
++++++++++++++++id:+this,
++++++++++++++++text:+this
++++++++++++});
++++++++});

++++++++callback(data);
++++},

++++//+Some+nice+improvements:

++++//+max+tags+is+3
++++maximumSelectionSize:+3,

++++//+override+message+for+max+tags
++++formatSelectionTooBig:+function+(limit)+{
++++++++return+"Max+tags+is+only+"+%2B+limit;
++++}
});|3047399|JSON：|3047400|[
++{
++++"id":+"tag1",
++++"text":+"tag1"
++},
++{
++++"id":+"tag2",
++++"text":+"tag2"
++},
++{
++++"id":+"tag3",
++++"text":+"tag3"
++},
++{
++++"id":+"tag4",
++++"text":+"tag4"
++}
]|3047401|更新2015-01-22:|style|BOLD|3047402|修复jsfiddle：http://jsfiddle.net/X6V2s/66/|3047403|更新2015-09-09:|3047404|有了Select2+v4.0.0%2B，这就变得更容易了。|3047405|选择v4.0.0|3047406|https://jsfiddle.net/59Lbxvyc/|3047407|3047408|<select+class="tags-select"+multiple="multiple"+style="width:+300px;">
++<option+value="tag1"+selected="selected">tag1</option>
++<option+value="tag2"+selected="selected">tag2</option>
</select>|3047409|JS：|3047410|$(".tags-select").select2({
++//+enable+tagging
++tags:+true,

++//+loading+remote+data
++//+see+https://select2.github.io/options.html#ajax
++ajax:+{
++++url:+"https://api.myjson.com/bins/444cr",
++++processResults:+function+(data,+page)+{
++++++return+{
++++++++results:+data
++++++};
++++}
++}
});|3047411|entityMap|0|LINK|mutability|MUTABLE|url|1|2|3^0|0|0|V|0|0|0|0|0|0|0|0|0|T|1|0|0|0|0|0|0|0|0|D|0|B|T|2|0|0|D|0|0|0|0|U|3|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|23|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|24|8|@]|9|@$D|25|E|26|1|27]]|A|$]]|$1|F|3|G|5|6|7|28|8|@]|9|@]|A|$]]|$1|H|3|I|5|J|7|29|8|@]|9|@]|A|$K|L]]|$1|M|3|N|5|6|7|2A|8|@]|9|@]|A|$]]|$1|O|3|P|5|J|7|2B|8|@]|9|@]|A|$K|L]]|$1|Q|3|R|5|6|7|2C|8|@]|9|@]|A|$]]|$1|S|3|T|5|6|7|2D|8|@]|9|@]|A|$]]|$1|U|3|V|5|6|7|2E|8|@]|9|@$D|2F|E|2G|1|2H]]|A|$]]|$1|W|3|X|5|6|7|2I|8|@]|9|@]|A|$]]|$1|Y|3|Z|5|J|7|2J|8|@]|9|@]|A|$K|L]]|$1|10|3|11|5|6|7|2K|8|@]|9|@]|A|$]]|$1|12|3|13|5|J|7|2L|8|@]|9|@]|A|$K|L]]|$1|14|3|15|5|6|7|2M|8|@]|9|@]|A|$]]|$1|16|3|17|5|J|7|2N|8|@]|9|@]|A|$K|L]]|$1|18|3|19|5|6|7|2O|8|@$D|2P|E|2Q|1A|1B]]|9|@]|A|$]]|$1|1C|3|1D|5|6|7|2R|8|@]|9|@$D|2S|E|2T|1|2U]]|A|$]]|$1|1E|3|1F|5|6|7|2V|8|@$D|2W|E|2X|1A|1B]]|9|@]|A|$]]|$1|1G|3|1H|5|6|7|2Y|8|@]|9|@]|A|$]]|$1|1I|3|1J|5|6|7|2Z|8|@]|9|@]|A|$]]|$1|1K|3|1L|5|6|7|30|8|@]|9|@$D|31|E|32|1|33]]|A|$]]|$1|1M|3|G|5|6|7|34|8|@]|9|@]|A|$]]|$1|1N|3|1O|5|J|7|35|8|@]|9|@]|A|$K|L]]|$1|1P|3|1Q|5|6|7|36|8|@]|9|@]|A|$]]|$1|1R|3|1S|5|J|7|37|8|@]|9|@]|A|$K|L]]|$1|1T|3|-4|5|6|7|38|8|@]|9|@]|A|$]]]|1U|$1V|$5|1W|1X|1Y|A|$1Z|C]]|20|$5|1W|1X|1Y|A|$1Z|V]]|21|$5|1W|1X|1Y|A|$1Z|V]]|22|$5|1W|1X|1Y|A|$1Z|1L]]]]

<h2>Select v4</h2>

<a href="http://jsfiddle.net/8qL47c1x/2/" rel="noreferrer">http://jsfiddle.net/8qL47c1x/2/</a>

HTML:

<pre><code>&lt;select multiple="multiple" class="form-control" id="tags" style="width: 400px;"&gt;
 &lt;option value="tag1"&gt;tag1&lt;/option&gt;
 &lt;option value="tag2"&gt;tag2&lt;/option&gt;
&lt;/select&gt;
</code></pre>

JavaScript:

<pre><code>$('#tags').select2({
 tags: true,
 tokenSeparators: [','],
 ajax: {
 url: 'https://api.myjson.com/bins/444cr',
 dataType: 'json',
 processResults: function(data) {
 return {
 results: data
 }
 }
 },

 // Some nice improvements:

 // max tags is 3
 maximumSelectionLength: 3,

 // add "(new tag)" for new tags
 createTag: function (params) {
 var term = $.trim(params.term);

 if (term === '') {
 return null;
 }

 return {
 id: term,
 text: term + ' (new tag)'
 };
 },
});
</code></pre>

<h2>Select v3.5.2</h2>

Example with some improvements:

<a href="http://jsfiddle.net/X6V2s/66/" rel="noreferrer">http://jsfiddle.net/X6V2s/66/</a>

html:

<pre><code>&lt;input type="hidden" id="tags" value="tag1,tag2" style="width: 400px;"&gt;
</code></pre>

js:

<pre><code>$('#tags').select2({
 tags: true,
 tokenSeparators: [','],
 createSearchChoice: function (term) {
 return {
 id: $.trim(term),
 text: $.trim(term) + ' (new tag)'
 };
 },
 ajax: {
 url: 'https://api.myjson.com/bins/444cr',
 dataType: 'json',
 data: function(term, page) {
 return {
 q: term
 };
 },
 results: function(data, page) {
 return {
 results: data
 };
 }
 },

 // Take default tags from the input value
 initSelection: function (element, callback) {
 var data = [];

 function splitVal(string, separator) {
 var val, i, l;
 if (string === null || string.length &lt; 1) return [];
 val = string.split(separator);
 for (i = 0, l = val.length; i &lt; l; i = i + 1) val[i] = $.trim(val[i]);
 return val;
 }

 $(splitVal(element.val(), ",")).each(function () {
 data.push({
 id: this,
 text: this
 });
 });

 callback(data);
 },

 // Some nice improvements:

 // max tags is 3
 maximumSelectionSize: 3,

 // override message for max tags
 formatSelectionTooBig: function (limit) {
 return "Max tags is only " + limit;
 }
});
</code></pre>

JSON:

<pre><code>[
 {
 "id": "tag1",
 "text": "tag1"
 },
 {
 "id": "tag2",
 "text": "tag2"
 },
 {
 "id": "tag3",
 "text": "tag3"
 },
 {
 "id": "tag4",
 "text": "tag4"
 }
]
</code></pre>

UPDATED 2015-01-22:

Fix jsfiddle: <a href="http://jsfiddle.net/X6V2s/66/" rel="noreferrer">http://jsfiddle.net/X6V2s/66/</a>

UPDATED 2015-09-09:

With Select2 v4.0.0+ it became easier.

<h2>Select v4.0.0</h2>

<a href="https://jsfiddle.net/59Lbxvyc/" rel="noreferrer">https://jsfiddle.net/59Lbxvyc/</a>

HTML:

<pre><code>&lt;select class="tags-select" multiple="multiple" style="width: 300px;"&gt;
 &lt;option value="tag1" selected="selected"&gt;tag1&lt;/option&gt;
 &lt;option value="tag2" selected="selected"&gt;tag2&lt;/option&gt;
&lt;/select&gt;
</code></pre>

JS:

<pre><code>$(".tags-select").select2({
 // enable tagging
 tags: true,

 // loading remote data
 // see https://select2.github.io/options.html#ajax
 ajax: {
 url: "https://api.myjson.com/bins/444cr",
 processResults: function (data, page) {
 return {
 results: data
 };
 }
 }
});
</code></pre>

I am doing tagging with <a href="http://ivaynberg.github.com/select2/#tags">select2</a>

I have these requirements with select2:

<ol>
<li>I need to search some tags using select2 ajax</li>
<li>Also I need to use "tags" in select2 which Allows values that are not in the list(Ajax result).</li>
</ol>

Both the scenarios work independently. But joined together aJax values are only populated. If we type any other values not in the list then it says "no matches found"

My scenario If user type any new value which is not in the list, allow them to make up their own tag.

Any way to make this work?

Tagging with AJAX in select2

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

我正在用做标签我对select2有以下要求：我需要使用select2 Ajax搜索一些标签，我还需要在select2中使用" tags“，它允许列表中没有的值(Ajax结果)。这两种方案都是独立工作的。但是连接在一起的aJax值只会被填充。如果我们输入列表中没有的任何其他值，那么它会显示“找不到匹配项”。我的方案是，如...

问在select2中使用AJAX进行标记
EN

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问在select2中使用AJAX进行标记EN

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问在select2中使用AJAX进行标记
EN