Как получить значение с помощью плагина Typeahead с помощью afterSelect и отобразить это значение внутри div? - PullRequest
Новая
       19

Как получить значение с помощью плагина Typeahead с помощью afterSelect и отобразить это значение внутри div?

0 голосов
/ 13 января 2020

Я использую Bootstrap Twitter-TypeAhead , и я хотел бы отобразить значение внутри div после того, как я выбрал значение в раскрывающемся списке ввода typeahead? Ниже приведен код, который я использую:

MySql таблица ( Продукты ): 

id | productName    | categoryFK  | image
---------------------------------------------
01 | Nike Tenis     | 1           | 001
02 | Adidas T-shirt | 2           | 002
03 | H. Shoes       | 1           | 003

Ниже приведен код html, отображающий вводимый текст который заполняется плагином typeahead и div, для которого я хочу отобразить значение: 

<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-3-typeahead/4.0.2/bootstrap3-typeahead.min.js"></script>  

<input type="text" name="products" id="products" autocomplete="off" placeholder="" />

<div id="image"></div>"

Ниже приведен код сценария Ajax, который отправляет запрос сценарию php: 

<script>
$(document).ready(function(){

 $('#products').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 item;
     }));
    }
   })
  }
 });

});
</script>

И, наконец, сценарий php, который получает запрос сценария Ajax и отправляет ответ: 

<?php
include 'dbConfig.php';

    $request = $db->real_escape_string($_POST["query"]);

    $query = "
         SELECT * FROM products WHERE productName LIKE '%".$request."%'
    ";

    $result = $db->query($query);
    $data = array ();

    if ( $result->num_rows > 0 )
    {
        while($row = $result->fetch_assoc ())
        {
            $data[]=$row["productName"];
            $data[]=$row["image"];
        }

        echo json_encode($data);
    }

?>

На основе приведенного выше кода я создал сценарий внутри сценария TypeAhead для получения значения после параметра выбора внутри выпадающего списка из входного текста #products и отображают соответствующее значение внутри div, которое вызывает #image, как показано ниже: 

$('#products').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 item;
     }));
    }
   })
  }
afterSelect: function (data) {
      //print the selected data inside input text
      $('#image').html(data.image);

    },  
 });

Приведенный выше код выводит данные внутри div #image, но значение, которое выводится, является выбранное значение, а не значение «изображения». На самом деле, на основании моей MySql таблицы products , например, я выбираю «Nike Tenis» и хочу отобразить значение столбца изображения «001» внутри div #image. Как я могу получить это значение?

...