JQuery автозаполнение показывает имя и поддерживает идентификатор, используя php и mysql - PullRequest
Новая
       1

JQuery автозаполнение показывает имя и поддерживает идентификатор, используя php и mysql

1 голос
/ 01 марта 2020


У меня есть эта проблема в автозаполнении, где список выглядит пустым (только границы без содержимого), вот мой код: Данные, которые я получаю: 

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


, но по какой-то причине список автозаполнения не будет отображаться ( Изображение для результата, который я получаю )
Но когда я изменяю способ, которым я sh данных в $ result получаю array_pu sh ($ result, $ aut-> nom) все работает нормально, но я не могу получить доступ к идентификатору таким образом !!

1 Ответ

0 голосов
/ 01 марта 2020

Добро пожаловать в переполнение стека!

Во-первых, у меня была эта проблема раньше, когда я начал использовать этот плагин (действительно потрясающий BTW) ...

В вашем коде, когда вы вводите автозаполнение:

  • плагин сравнивает 'input' с 'ключевым словом',
  • , когда передаете массив в представление в 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 по мере необходимости d должен работать так, как вы ожидаете.

Редактировать: я что-то пропустил, вы можете сохранить id в скрытом вводе, как я сделал, передать его в последний объект массива.

Надеюсь это тебе поможет!

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...