JQuery 自动完成显示名称并使用 php 和 mysql 维护 id答案

【问题标题】：JQuery autocomplete show name and maintain id using php and mysqlJQuery 自动完成显示名称并使用 php 和 mysql 维护 id
【发布时间】：2025-12-11 07:45:02
【问题描述】：

我在列表看起来空白的自动完成中遇到了这个问题（只是边框没有内容），这是我的代码：
我收到的数据：

<?php
require 'cnx/cnx.php';

$stmt = $pdo->prepare('select * from auteurs where nom like :keyword');
$stmt->bindValue('keyword', '%' . $_GET['term'] . '%');
$stmt->execute();

$result = array();
while ($aut = $stmt->fetch(PDO::FETCH_OBJ)) {
   array_push($result, (object) [
      'id_aut' => $aut->id_aut,
      'nom' => $aut->nom,
      'siecle' => $aut->siecle
   ]);
}
echo json_encode($result);

我得到的结果是这样编码的：

[
   {
      "id_aut":1,
      "nom":"Shannon Ashley",
      "siecle":17
   },
   {
      "id_aut":2,
      "nom":"Nathaniel Middleton",
      "siecle":17
   },
   {
      "id_aut":3,
      "nom":"Amber Nixon",
      "siecle":21
   }
]

HTML 代码

<!DOCTYPE html>
<html lang="en">

<head>
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
   <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
   <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>

   <script>
      $(function() {
         $("#auteur_inp").autocomplete({
            minLength: 0,
            source: "data.php",
            select: function(event, ui) {
               $("#auteur_inp").val(ui.item.nom);
               $("#auteur_hid").val(ui.item.id_aut);
            }
         });
      });
   </script>
</head>

<body>
   <form method="post">

       <input type="text" name="auteur_inp" id="auteur_inp" />
       <input type="hidden" name="auteur_hid" id="auteur_inp" />

      <input type="submit" name="submit" value="Ajouter">
   </form>
</body>
</html>

但由于某种原因，自动完成列表不会出现（ Image for the result i get)
但是，当我将数据推送到 $result 的方式更改为 array_push($result, $aut->nom) 时，它工作正常，但我无法以这种方式访问 id！

【问题讨论】：

标签： javascript php jquery html ajax

【解决方案1】：

欢迎来到 Stack Overflow！

首先，我在开始使用这个插件之前遇到了这个问题（真的很棒BTW）......

在您的代码中，当您键入自动完成时：

插件将“输入”与“关键字”进行比较，
将数组传递给 array_push 中的视图时，您有 3 个对象（id_aut、nom、siecle）
但是，当以 HTML 格式接收它们时，您只有 2 个对象（nom、id_aut）。

我在我的项目中使用 laravel，我将分享我的部分代码来解释如何解决这个问题...

在我的控制器中：

$response = array();
  foreach($items as $it) {
     $response[] = array("id"       => $it->cod_ref,
                          "label"   => $it->name,
                          "qty"     => $it->qty,
                          "price"   => $it->price,
                          "big_id"  => $it->id);
  }

  echo json_encode($response);
  exit;

在我的<script> 块视图中：

  // the initial code of autocomplete function goes here
select: function (event, ui) {
// Set selection
   $('.item_cod_ref').val(ui.item.id); // with this i search
   $('.item_name').val(ui.item.label); // this is what i show in the dropdown
   $('.item_qty').val(ui.item.qty);
   $('.item_price').val((Number(ui.item.price)).toFixed(2));
   $('#item_id').val(ui.item.big_id);
return false;

如果你比较两个select，你会发现array_push中的每个对象都必须有相同的ui对象作为回报。

现在在我看来，就像在你的 HTML 中一样：

<input type="hidden" name="item_id" id="item_id" />
<input class="item_cod_ref form-control" />
<input class="item_name form-control" />
<input type="number" class="form-control" />
<input type="number" class="item_qty form-control" />
<input class="item_price form-control" />

我收到的每个对象都有一个输入，我做什么或你对数据做什么是无关紧要的。

因此，根据需要添加所有ui.object 和input，应该可以按预期工作。

编辑：我错过了一些东西，您可以像我一样将id 保存在隐藏输入中，将其传递到数组的最后一个对象中。

希望对您有所帮助！

【讨论】：

您好，感谢您的建议，我确实尝试从 array_push 中删除了第三个对象“siecle”，现在我所有的对象都有一个输入，但在我链接的图片中仍然是相同的结果`array_push($结果，（对象）[ 'id' => $aut->id_aut, 'nom' => $aut->nom ]);` 在 HTML 中：` select: function(event, ui) { $("#auteur_hid ").val(ui.item.id); $("#auteur_inp").val(ui.item.nom); }`
好的，测试您的新代码，您使用 id 搜索并在下拉列表中获得 nom，尝试使用 label insted of nom for array_push 和 select in HTML，如果能解决问题，现在让我更新我的答案。