Попытка получить идентификатор и значение с помощью typeahead.js, php и Ajax - PullRequest
Новая
       21

Попытка получить идентификатор и значение с помощью typeahead.js, php и Ajax

0 голосов
/ 03 января 2019

Я пытаюсь получить идентификатор и название страны из базы данных и сделать автозаполнение, которое получит идентификатор страны для дальнейшего поиска в базе данных. Но когда я хочу получить только имя, оно работает отлично, но когда яхочу получить идентификатор, а ничего больше не работает.Я очень ценю вашу помощь.

fetch.php 

<?php 
$conn = new mysqli($servername, $username, $password, $dbname);
if ($conn->connect_error) {
echo 'Connect Error (' . $conn->connect_errno . ') '
    . $conn->connect_error;
}
// $conn;
$request = mysqli_real_escape_string($conn,$_POST["query"]);
$sql = "SELECT * FROM countries where name like '".$request."%' ";
$result = $conn->query($sql);

$data = array();

if ($result->num_rows > 0) {
 // output data of each row
 while($row = $result->fetch_assoc()) {
      $data[] = array('name' => $row["name"] , 'id'=> $row["id"]);
 }
echo json_encode($data);
} 
?>

index.php 

<script>
$(document).ready(function(){
 
 $('#country').typeahead({
  source: function(query, result)
  {
   $.ajax({
    url:"fetch.php",
    method:"POST",
    data:{query:query},
    dataType:"json",
    success:function(data){
     result($.map(data, function(item){
      return {
          id:item.id,
          name:item.name
      }
     }));
    }
   })
  }
  select: function (event,ui){
     $(this).val(ui.item.name);
     $('#idc').val(ui.item.id);
     return false;
     }
 });
 
});
</script>
 <form action="" method="post">
   <input type="text" name="country" id="country" class="form-control input-lg" autocomplete="off" placeholder="Type Country Name" />
   <input type="hidden" name="idc" value="" id="idc">
   <input type="submit" value="submit">
     </form>

Сценарий выше не работает, потому что я тоже пытаюсь получить идентификатор.но приведенный ниже скрипт работает, потому что он просто показывает название страны. 

<script>
$(document).ready(function(){
 
 $('#country').typeahead({
  source: function(query, result)
  {
   $.ajax({
    url:"fetch.php",
    method:"POST",
    data:{query:query},
    dataType:"json",
    success:function(data){
     result($.map(data, function(item){
      return {
          id:item.id,
          name:item.name
      }
     }));
    }
   })
  }
 });
 
});
</script>

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

1 Ответ

0 голосов
/ 07 января 2019

Я решил это в тот же день, но я был слишком занят, чтобы обновить результат здесь. Моя ошибка заключалась в том, что я комбинировал автозаполнение jquery и typeahead вместе. для того, что я хотел сделать, автозаполнения jquery было более чем достаточно, и вот код для этого 

$('#placeautocomplete').autocomplete({
          source: "fetch.php",
          select: function (event,ui){
               $(this).val(ui.item.value)
               $('#placeidautoc').val(ui.item.id);
          },
          minLength: 2,
          autoFocus :true,

     });
...