Fatal编程技术网
  • javascript/
  • Javascript JQuery使用php和mysql自动完成显示名称和维护id

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

javascript php jquery html ajax

Javascript JQuery使用php和mysql自动完成显示名称和维护id,javascript,php,jquery,html,ajax,Javascript,Php,Jquery,Html,Ajax,我在自动完成中遇到了这个问题，列表看起来是空白的（只是边框没有内容）， 这是我的代码： 我收到的数据： <?php require 'cnx/cnx.php'; $stmt = $pdo->prepare('select * from auteurs where nom like :keyword'); $stmt->bindValue('keyword', '%' . $_GET['term'] . '%'); $stmt->execute(); $result =


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

<?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);

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>


$（函数（）{
$（“#auteur_inp”）.自动完成({
最小长度：0，
资料来源：“data.php”，
选择：功能（事件、用户界面）{
美元（“#auteur_inp”）.val（ui.item.nom）；
$（“#auteur_hid”）.val（ui.item.id_aut）；
}
});
});

但由于某些原因，自动完成列表不会出现( )
但是当我改变将数据推送到$result到array\u push（$result，$aut->nom）的方式时，它可以正常工作，但我不能用这种方式访问id

欢迎使用堆栈溢出

首先，我以前在开始使用这个插件时遇到过这个问题（顺便说一句，真是太棒了）

在代码中，键入“自动完成”时：

  • 插件将“输入”与“关键字”进行比较
  • 将数组传递到
    array\u push
    中的视图时，有3个对象（id\u aut、nom、siecle）
  • 但是，在HTML中接收它们时，您只有2个对象（nom、id\u 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;
在视图的my
块中：

  // 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\u 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\u push
    中的视图时，有3个对象（id\u aut、nom、siecle）
  • 但是，在HTML中接收它们时，您只有2个对象（nom、id\u 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;
在视图的my
块中：

  // 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\u 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（$result，（object）['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
，尝试在HTML中使用
label
代替
nom
进行
array\u push
和
select
，如果这样可以解决问题，请让我现在更新我的答案。您好，感谢您的建议，我确实尝试过并从array\u push中删除了第三个对象“siecle”，现在我的所有对象都有了输入，但在我链接的图片中仍然是相同的结果，`array\u push（$result，（object）['id'=>$aut->id\u aut，'nom'=>$aut->nom]）；`在HTML中：`select:function（event，ui）{$（“#auteur_hid”）.val（ui.item.id）；$（“#auteur_inp”）.val（ui.item.nom）}`好的，测试你的新代码，你用id搜索并在下拉列表中得到
nom
，尝试在HTML中使用
label
代替
nom
进行
array\u push
和
select
，如果可以解决问题，请让我现在更新答案。