如何在脚本中获取json文件的多个值以实现自动完成形式 [英] how to fetch multiple values of json file in an script for autocomplete form
问题描述
请，我是php的初学者. 我想使用以json编码的数组，如下所示: http://stegonia.fr/autocomplete/index2.php (您可以看到var_dump). 我希望能够以自动完成形式查看值和标签名称，并将ID号存储在数据库中.
Please, I'm a beginner with php.. I would like to use an array encoded in json like this : http://stegonia.fr/autocomplete/index2.php (you can see result of a var_dump). I want to be able to see in an autocomplete form the value and label name and store the id number in my database.
我要使用此自动完成解决方案:
I want to use this autocomplete solution :
http://stegonia.fr/autocomplete/index3.php
此解决方案(index3)的javascript是:
The javascript of this solution (index3) is :
<script>
$(document).ready(function () {
$('#speciesname').typeahead({
source: function (query, result) {
$.ajax({
url: "server3.php",
data: 'query=' + query,
dataType: "json",
type: "POST",
success: function (data) {
result($.map(data, function (item) {
return item;
}));
}
});
}
});
});
server2的php代码是这样的:
php code of server2 is this one :
$term = trim(strip_tags($_GET['term']));
$a_json = array();
$a_json_row = array();
if ($data = $mysqli->query("SELECT * FROM `taxrefv11_mini` WHERE `GROUP2_INPN` = 'oiseaux' and `NOM_VERN` LIKE '%$term%' ORDER BY `NOM_VERN`")) {
while($row = mysqli_fetch_array($data)) {
$nomlat = htmlentities(stripslashes($row['NOM_VALIDE']));
$nomvern = htmlentities(stripslashes($row['NOM_VERN']));
$code = htmlentities(stripslashes($row['CD_REF']));
$a_json_row["id"] = $code;
$a_json_row["value"] = $nomvern.' '.$nomlat;
$a_json_row["label"] = $nomlat.' '.$nomvern;
array_push($a_json, $a_json_row);
}
}
// jQuery wants JSON data
echo json_encode($a_json);
flush();
$mysqli->close();
请，我不太了解javascript，我的问题是:
Please, I don't know well javascript my question is :
如果我使用server2.php发送的json文件，index3的javascript提取"id"，"value"和"label"的值的正确语法是什么?
If I use json file sended by server2.php, what is the right syntax of the javascript of index3 to fetch values of "id", "value" and "label" ?
谢谢 奥利维尔
推荐答案
有人帮助我解决了. 下面的解决方案.但是有一个问题:将鼠标悬停在自动完成表单中的菜单上时，菜单项会消失.在这里讨论:
Someone helped me to solve. Below the solution. But there is a problem : menu items disappear when hovering over a menu in the autocomplete form. It's discussed here :
这是整个php文件.此文件称为发送json的server2.php文件 ( http://stegonia.fr/autocomplete/server2.php )
This is the entire php file. This file call a server2.php file who send json (http://stegonia.fr/autocomplete/server2.php)
此处是整个index.12.php( http://stegonia.fr/autocomplete/index12. php )
here the entire index.12.php (http://stegonia.fr/autocomplete/index12.php)
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Autocomplete with Dynamic Data Load using PHP Ajax</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<!-- Bootstrap core CSS -->
<link href="./css/bootstrap.min.css" rel="stylesheet">
<script src="jquery-2.1.4.min.js"></script>
<script src="//twitter.github.io/typeahead.js/releases/latest/typeahead.jquery.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-3-typeahead/4.0.2/bootstrap3-typeahead.js"></script>
</head>
<body>
<div class="container-fluid">
Search a species name and press enter (linotte for example) :
<form method="post" action="index12.php" id="form">
<input type="text" name="speciesname" id="speciesname" autocomplete="off" class="typeahead"/>
<input type="hidden" name="speciesid" id="speciesid">
</form>
<script>
function html_decode(value) {
return $('<textarea />').html(value).text()
}
$(document).ready(function () {
var input = document.getElementById('speciesname');
input.focus();
$('#speciesname').typeahead({
source: function (query, store) {
if (!input.value || input.value.length < 3) {
return [];
}
$.ajax({
url: 'server2.php',
data: 'term=' + query,
dataType: 'json',
type: 'post',
success: function (data) {
var species = [];
$.each(data, function (i, item) {
species.push({ id: item.id, name: html_decode(item.value) });
});
return store(species);
}
}
)
},
matcher: function (item) {
return item.name ? item.name.toLowerCase()
.indexOf(this.query.toLowerCase()) !== -1 : false;
},
afterSelect: function (item) {
if (item.id) {
$(input).val(item.name);
$('#speciesid').val(item.id);
$('#form').submit();
}
}
})
});
</script>
<br>
<?php if (isset($_POST['speciesid'])): ?>
<p>The code number (id number) of the previous selected species is : <?php echo $_POST['speciesid'] ?></p>
<?php endif; ?>
</body>
</html>
这篇关于如何在脚本中获取json文件的多个值以实现自动完成形式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
