jQuery select2：重复标签被重新创建
Posted
技术标签:
【中文标题】jQuery select2：重复标签被重新创建【英文标题】：jQuery select2: duplicate tag getting recreated 【发布时间】：2016-05-15 20:51:26 【问题描述】：我今天早些时候问了一个问题 (jquery select2: error in getting data from php-mysql)。但是，我正在尝试修复它，现在我遇到了一些奇怪的问题。我不知道为什么会这样。
下面是 javascript 代码。
<div class="form-group">
<label class="col-sm-4 control-label">Product Name</label>
<div class="col-sm-6">
<input type="hidden" id="tags" style="width: 300px"/>
</div>
</div>
<script type="text/javascript">
var lastResults = [];
$("#tags").select2(
multiple: true,
placeholder: "Please enter tags",
tokenSeparators: [","],
initSelection : function (element, callback)
var data = [];
$(element.val().split(",")).each(function ()
data.push(id: this, text: this);
);
callback(data);
,
ajax:
multiple: true,
url: "fetch.php",
dataType: "json",
type: "POST",
data: function(term)
return q: term;
,
results: function(data)
return results: data;
,
,
createSearchChoice: function (term)
var text = term + (lastResults.some(function(r) return r.text == term ) ? "" : " (new)");
return id: term, text: text ;
,
);
$('#tags').on("change", function(e)
if (e.added)
if (/ \(new\)$/.test(e.added.text))
var response = confirm("Do you want to add the new tag "+e.added.id+"?");
if (response == true)
alert("Will now send new tag to server: " + e.added.id);
/*
$.ajax(
type: "POST",
url: '/someurl&action=addTag',
data: id: e.added.id, action: add,
error: function ()
alert("error");
);
*/
else
console.log("Removing the tag");
var selectedTags = $("#tags").select2("val");
var index = selectedTags.indexOf(e.added.id);
selectedTags.splice(index,1);
if (selectedTags.length == 0)
$("#tags").select2("val","");
else
$("#tags").select2("val",selectedTags);
);
</script>
这里是 php 代码 (fetch.php)
<?php
// connect to database
require('db.php');
// strip tags may not be the best method for your project to apply extra layer of security but fits needs for this tutorial
$search = strip_tags(trim($_GET['q']));
//$search='te';
// Do Prepared Query
$query = $mysqli->prepare("SELECT tid,tag FROM tag WHERE tag LIKE :search LIMIT 4");
// Add a wildcard search to the search variable
$query->execute(array(':search'=>"%".$search."%"));
// Do a quick fetchall on the results
$list = $query->fetchall(PDO::FETCH_ASSOC);
// Make sure we have a result
if(count($list) > 0)
foreach ($list as $key => $value)
$data[] = array('id' => $value['tid'], 'text' => $value['tag']);
else
$data[] = array('id' => '0', 'text' => 'No Products Found');
// return the result in json
echo json_encode($data);
?>
select2 版本为 3.5
以上代码可以通过使用 fetch.php 从数据库发送/接收请求。
问题出在我的数据库中有两条记录 test 和 temp 当我标记其中任何一条时，它会创建新标记。
它应该像这样工作：如果数据库有值，那么它不会创建具有相同名称的新标签。
更新
【问题讨论】：
【参考方案1】：标签需要一个 id 和一个文本。您面临的问题是您的文本与 id 不匹配。
因此，即使您编写相同的文本，Select2 也会认为新文本是一个新选项，因为 id 不匹配。
要解决您的问题，您需要将 id 设置为与文本相同的值。将 fetch.php 的 foreach 更改为以下内容：
foreach ($list as $key => $value)
$data[] = array('id' => $value['tag'], 'text' => $value['tag']);
更新：
您还需要更新变量lastResults 以避免重复使用相同文本的标签。绑定select2的时候，需要把ajax的results属性改成这个（基于this answer：
ajax:
multiple: true,
url: "fetch.php",
dataType: "json",
type: "POST",
data: function(term)
return q: term;
,
results: function(data)
lastResults = data.results;
return results: data;
,
,
注意lastResults = data.results;。没有这个，lastResults 变量总是空的，当createSearchChoice 函数被执行时，它总是会返回一个新的标签。
【讨论】：
感谢您的帮助。我会检查并通知您。 现在还有一个问题。如果我在搜索框中编写测试，那么它会在那里显示我的测试，但它会创建一个新标签，如这个测试（新标签）。我附上截图。 @404 我用静态数据创建了一个演示（temp 和test），这样你就可以看到它是如何工作的。至于通过回车、制表符或逗号创建标签，它在我的小提琴上工作。我想您应该先尝试使其与静态数据一起工作，然后将 select2 连接到 PHP 和 MySQL。在这里检查小提琴：jsfiddle.net/milz/avqfjc33
@404：是的，我明白了。您似乎参与了this answer's code，但删除了其中的重要部分。在createSearchChoice 上，您使用的是lastResults，但此值始终为空。看看答案是你拿了代码并在ajax 的results 上检查lastResults 的使用情况。我更新了我的小提琴以假设选项并且它工作正常（jsfiddle.net/milz/avqfjc33/1）
终于成功了。现在我正在努力在数据库中添加标签。【参考方案2】：
现在终于可以使用了。我要感谢@alex 和@milz 的支持。 这是完整的 n 最终代码。现在不会创建重复的标签。但是，我正在努力在数据库中添加标签。
php/html 文件
<div class="form-group">
<label class="col-sm-4 control-label">Product Name</label>
<div class="col-sm-6">
<input type="hidden" id="tags" style="width: 300px"/>
</div>
</div>
<script type="text/javascript">
var lastResults = [];
$("#tags").select2(
multiple: true,
tags: true,
placeholder: "Please enter tags",
tokenSeparators: [',', ' '],//[","],
initSelection : function (element, callback)
var data = [];
$(element.val().split(",")).each(function ()
data.push(id: this, text: this);
);
callback(data);
,
ajax:
multiple: true,
url: "fetch.php",
dataType: 'json',
// type: "POST",
data: function(term,page)
return
term: term
;
,
results: function(data,page)
lastResults = data;
return results: data;
,
,
maximumSelectionSize: 3,
minimumInputLength: 3,
createSearchChoice: function(term)
console.log($(this).attr('data'));
var text = term + (lastResults.some(function(r)
console.log(r.text);
console.log(term);
return r.text == term
) ? "" : " (new)");
return
id: term,
text: text
;
,
);
$('#tags').on("change", function(e)
if (e.added)
if (/ \(new\)$/.test(e.added.text))
var response = confirm("Do you want to add the new tag "+e.added.id+"?");
if (response == true)
alert("Will now send new tag to server: " + e.added.id);
/*
$.ajax(
type: "POST",
url: '/someurl&action=addTag',
data: id: e.added.id, action: add,
error: function ()
alert("error");
);
*/
else
console.log("Removing the tag");
var selectedTags = $("#tags").select2("val");
var index = selectedTags.indexOf(e.added.id);
selectedTags.splice(index,1);
if (selectedTags.length == 0)
$("#tags").select2("val","");
else
$("#tags").select2("val",selectedTags);
);
</script>
这是从数据库中获取数据的 php 文件。 fetch.php
<?php
// connect to database
require('db.php');
// strip tags may not be the best method for your project to apply extra layer of security but fits needs for this tutorial
//if(isset($_GET))
$search = strip_tags(trim($_GET['term']));
// Do Prepared Query
$query = $mysqli->prepare("SELECT tid,tag FROM tag WHERE tag LIKE :search LIMIT 4");
// Add a wildcard search to the search variable
$query->execute(array(':search'=>"%".$search."%"));
$list = $query->fetchall(PDO::FETCH_ASSOC);
if(count($list) > 0)
foreach ($list as $key => $value)
$data[] = array('id' => $value['tag'], 'text' => $value['tag']);
else
$data[] = array('id' => 'No Products Found', 'text' => 'No Products Found');
echo json_encode($data);
?>
花了很多时间。差不多3天。我希望它会节省一些人的努力。
【讨论】：
【参考方案3】：按照下面的 select2.min.js (v4.0.6-rc.1) 代码 sn-p 应用更改
第 1 节
c.on("results:select", function()
var a = e.getHighlightedResults();
if (0 !== a.length)
var c = b.GetData(a[0], "data");
"true" == a.attr("aria-selected") ? e.trigger("close", ) : e.trigger("select",
//custom select2 tagging
if(a.attr("aria-selected"))
c.id = c.id + 1;
e.trigger("select",
data: c
)
//"true" == a.attr("aria-selected") ? e.trigger("close", ) : e.trigger("select",
// e.trigger("select",
// data: c
// )
)
第 2 节
this.on("query", function(b)
a.isOpen() || a.trigger("open", ), this.dataAdapter.query(b, function(c)
//custom select2 tagging
let searchInput = $(".select2-search__field").val();
searchInput = results: [id: searchInput, text: searchInput];
a.trigger("results:all",
data: c,
data: searchInput,
query: b
)
)
)
【讨论】：
以上是关于jQuery select2：重复标签被重新创建的主要内容，如果未能解决你的问题，请参考以下文章
Select2 jquery插件在结果中显示所选项目的数量而不是标签