如何在自动完成表单的脚本中获取多个json文件值答案

【问题标题】：how to fetch multiple values of json file in an script for autocomplete form如何在自动完成表单的脚本中获取多个json文件值
【发布时间】：2018-03-07 17:23:39
【问题描述】：

拜托，我是 php 的初学者。我想使用这样的 json 编码的数组： http://stegonia.fr/autocomplete/index2.php（你可以看到 var_dump 的结果）。我希望能够以自动完成形式查看值和标签名称，并将 ID 号存储在我的数据库中。

我想使用这个自动完成解决方案：

http://stegonia.fr/autocomplete/index3.php

这个解决方案（index3）的javascript是：

<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代码是这个：

$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，我的问题是：

如果我使用 server2.php 发送的 json 文件，index3 的 javascript 获取“id”、“value”和“label”值的正确语法是什么？

谢谢奥利维尔

【问题讨论】：

我看到的是您的 php 只返回名称。输入 "h" 返回 0:"Harle piette" 1: "h..." 必须将行推送到 $_a_json_row 然后像现在一样推送
谢谢 Luis Gar。事实上，我会在 index3 的脚本中使用 server2 的结果（链接到 index2）。但是我不知道如何在 index3 的这个脚本中获取 id、value 和 label ......这是我的问题。
现在您将拥有密钥，因此成功： function (data) { return data.id; }));
谢谢 luis，你的意思是新脚本是 $(document).ready(function () { $('#speciesname').typeahead({ source: function (query, result) { $.ajax({ url: "server3.php", data: 'query=' + query, dataType: "json", type: "POST", success: function (data) { return data.id; })); } }); } }); }); 它不能这样工作:(

标签： php json autocomplete

【解决方案1】：

有人帮我解决了。下面的解决方案。但是有一个问题：将鼠标悬停在自动完成表单中的菜单上时，菜单项会消失。在这里讨论：

Why menu items disappear when hovering over a menu in autocomplete form

这是整个 php 文件。此文件调用发送 json 的 server2.php 文件 (http://stegonia.fr/autocomplete/server2.php)

这里是整个 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>

【讨论】：