Как заполнить Twitter Typeahead на основе значения поля выбора? - PullRequest
Новая
       33

Как заполнить Twitter Typeahead на основе значения поля выбора?

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

У меня есть вводимый текст, который правильно заполняется с помощью Twitter Typeahead. В этом случае я хотел бы выбрать значение из поля выбора и заполнить входной текст значениями, которые связаны с выбранным значением выпадающего списка. Я нашел похожие вопросы о своем сомнении, но, к сожалению, я не смог правильно решить эту проблему:

  1. Динамически заполняемый Twitter Bootstrap Typeahead
  2. Twitter bootstrap Введите имя для заполнения hrefs
  3. jQuery Автозаполнение / Twitter Введите заголовок для заполнения нескольких полей

Ниже приведен код для выбора поле, заполненное кодом php и текстом ввода, заполненным сценарием Twitter TypeAhead: 

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

    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta charset="utf-8">

<!-- CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-3-typeahead/4.0.2/bootstrap3-typeahead.min.js"></script>   

</head>

<body>

<div class="container">

<br>

<h1>DYNAMIC TWITTER TYPEAHEAD</h1>

<br>
<div class="row">

<?php 
    // Include the database config file 
    include_once 'dbConfig.php'; 

    // Fetch all the category data 
    $query = "SELECT * FROM categories ORDER BY category ASC"; 
    $result = $db->query($query); 
?>


<!-- category dropdown -->
<div class="col-md-4">
<select id="categoryFK" name="categoryFK" class="form-control">
    <option value="">Select category</option>
    <?php 
    if($result->num_rows > 0){ 
        while($row = $result->fetch_assoc()){  
            echo '<option value="'.$row['categoryID'].'">'.$row['category'].'</option>'; 
        } 
    }else{ 
        echo '<option value="">Category not available</option>'; 
    } 
    ?>
</select>
</div>

<div class="col-md-4">

<input type="text" name="products" id="products" class="form-control input-lg" autocomplete="off" placeholder="" />

</div>

</div>
</div>


</body>
</html>

Ниже приведен сценарий, вызывающий сценарий php через Ajax: 

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

 $('#categoryFK').on('change', function(){
        var queryID = $(this).val();
 if(queryID){
 $('#products').typeahead({
  source: function(query, result)
  {
   $.ajax({
    url:"fetch.php",
    method:"POST",
    data: 'query='+queryID,
    dataType:"json",
    success:function(data)
    {
     result($.map(data, function(item){
      return item;
     }));
    }
   })
  }
 });
 }
 });
});
</script>

И ниже скрипт php ( fetch. php), который заполняет значения в соответствии с categoryID: 


<?php
//fetch.php
include 'dbConfig.php';
if(!empty($_POST["query"])){ 
$request = mysqli_real_escape_string($db, $_POST["query"]);
$query = "
 SELECT * FROM products WHERE productName LIKE '%".$request."%' AND categoryFK = ".$_POST["query"]."
";

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

if(mysqli_num_rows($result) > 0)
{
 while($row = mysqli_fetch_assoc($result))
 {
  $data[] = $row["productName"];
 }
 echo json_encode($data);
}
}
?>

Как я показал код выше, когда я введите что-то в текст ввода после того, как я выбрал любую опцию в поле выбора, текст ввода с помощью Twitter TypeAhead просто заполняет один регистр.

В этом случае, как я могу улучшить php код выше, чтобы заполнить текст ввода значениями связанные с правильно ли выбрать значение поля? Спасибо.

1 Ответ

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

Мне удалось решить проблему. Ниже приведены сценарии, которые я изменил, чтобы адаптировать к моему проекту:

AJAX

<script type="text/javascript">
        var products;
        $ ( function ()
        {
            $('#categoryFK').on('change', function(){
                var queryID = $(this).val();

                $.ajax({
                    url:"fetch.php",
                    method:"POST",
                    data: {
                        category: queryID
                    },
                    dataType:"json",
                    success:function(data)
                    {
                        $("#products").val ('');

                        products = data;
                    }
                });
            });

            $('#products').typeahead({
                source: function ( query, result )
                {
                    result ( $.map(products, function (item)
                        {
                            return item;
                        }
                    ));
                }
            });
        });
        </script>

И PHP скрипт ( fetch. php) 

<?php
include 'dbConfig.php';

if ( isset ( $_POST [ 'category' ] ) ) {
    $request = $db->real_escape_string($_POST["category"]);

    $query = "
        SELECT * FROM products WHERE categoryFK = ".$request."
    ";

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

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

        echo json_encode($data);
    }
}
?>

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

...