可能是最糟糕的问题,但我不知道如何表达它。
基本上我已经在我的代码中实现了jQuery 标记。但是,我正在使用另一个用户的解决方案,它可以将我想要的数据拉回并将其转储到我需要的输入中。
我得到的解决方案是:
jQuery:
$(document).ready(function(){
var availableTags = <?php include("ajax-search.php"); $english = search();?>;
$("#livesearch").tagit({
autocomplete: {
source: availableTags
}
});
});
PHP/MySQLi:
function search() {
include("dbconnect.php"); //Including our DB Connection file
$sql = "SELECT * FROM animals";
$query = mysqli_query($db, $sql);
while ($result = mysqli_fetch_assoc($query)){
$english[] = $result['eng_names'];
}
echo json_encode($english);
}
本质上我想返回 3 个变量。英语、拉丁语和地位。
所以,前提是:
Status = English == Latin
因此,在状态下,我有灭绝、濒危、野外灭绝等。但是有些动物不在这些列表中。这些动物可能很常见,因此不需要特殊标签,但它们都需要有自己的拉丁名字。
目的是如果用户输入“灭绝”,则会出现所有已死亡动物的列表。
为什么要使用标签?好吧,因为它们是报告。用户将编写报告并标记其中涉及的任何动物。需要返回动物的名称(拉丁语和英语),而不是状态。
我想我理解 json 是如何做到这一点的。只需添加它们。如果该字段在状态列中没有文本,则忽略它。但是,我不知道如何从 mysqli 搜索中返回它。我认为该方法是 .map() 但每当我使用 .map() 时,搜索功能都会中断(因为它列出了所有生物,但如果您键入它并不会引导搜索。
编辑:
喜悦。所以,我设法弄清楚如何匹配我感到困惑的两个参数。
我通过修改原始 jQuery 来做到这一点:
<script>
$(document).ready(function(){
$("#livesearch").tagit({
autocomplete: {
source: 'ajax-search.php',
minLength:1
}
});
});
</script>
然后在 HTML 中我添加了一个 post 方法:
<form method="post">
<input name="tags" id="latin" size="100%" disabled="true">
<ul id="livesearch"></ul>
<input type="submit" value="Submit" />
</form>
但是搜索都发生在 PHP/MySQLi 查询上:
if ( !isset($_REQUEST['term']) )
exit;
$keyword = trim($_REQUEST['term']);
$keyword = mysqli_real_escape_string($db, $keyword);
$query = "SELECT * FROM animals WHERE english LIKE '%$keyword%' OR status LIKE '%$keyword%'";
$result = mysqli_query($db, $query); //Run the Query
$data = array();
if ($result && mysqli_num_rows($result)){
while($row = mysqli_fetch_assoc($result)){
$data[] = array(
'label' => $row['english'],
'value' => $row['english'],
'latin' => $row['latin']
);
}
}
echo json_encode($data);
flush();
所以,如果我搜索状态(灭绝、濒危等),它会返回正确的动物。
我从这些家伙那里得到了想法/代码。
所以我现在被困在我需要在两个不同的领域显示拉丁语和英语的部分,但我认为这与摆弄 tag-it.js 源代码有关。如果我弄清楚了,我会更新。
编辑2:
好的,我设法让它将两个不同的结果放入两个不同的文本字段中。但它不会关闭标签的输入。
这是修改后的 jQuery:
$("#livesearch").tagit({
autocomplete: {
source: "ajax-search.php",
select: function(evt, ui){
this.form.latin.value = ui.item.latin;
}
}
});
它的工作原理是将拉丁文放在拉丁文文本输入中。但它现在不像以前那样将输入包装成一个整洁的小标签。
编辑 3
我已经尽我所能,但无济于事。
本质上,我通过扩展自动完成字段,在 tag-it.js 本身中添加了变量调用:
// Autocomplete.
if (this.options.availableTags || this.options.tagSource || this.options.autocomplete.source) {
var autocompleteOptions = {
select: function(event, ui) {
that.createTag(ui.item.value);
that.createTag(ui.item.latin); //custon input?
// Preventing the tag input to be updated with the chosen value.
return false;
}
};
$.extend(autocompleteOptions, this.options.autocomplete);
然而,所做的只是同时添加动物的常规英文名称和动物的拉丁名称。之后我可以删除英文名称,但这太啰嗦了。
我尝试使用this.form.latin.value = ui.item.latin;
似乎可行的方法,但是如果我添加了许多标签,或者如果我删除了一个标签,整个代码就会中断。这似乎是一个单向的事情,所以这不是一个很好的解决方案。