Как отобразить изображение внутри div после выбора значения из входного текста плагина TypeAhead? - PullRequest
Новая
       18

Как отобразить изображение внутри div после выбора значения из входного текста плагина TypeAhead?

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

Я использую динамический c зависимый Twitter-TypeAhead , где вводимый текст заполняется после того, как пользователь выбрал значение в html поле выбора. Я хотел бы получить значение после того, как пользователь выберет опцию в раскрывающемся списке ввода текста и отобразит это значение в div, используя php или jquery. На самом деле значение, которое я хотел бы отобразить внутри div, взято из столбца «image» таблицы продуктов.

Для этого я создал таблицу, которая вызывает products , и его структура похожа на приведенную ниже. : 

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

-> в табличных продуктах есть один первичный ключ, который вызывает categoryFK

И для отображения значений выше, у меня есть страница указателя, содержащая одно поле выбора, заполненное кодом php и один входной текст, заполненный плагином TypeAhead , когда пользователь выбирает значение внутри поля выбора: 

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

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

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

<!-- jQuery UI library -->
<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 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>TWITTER DYNAMIC 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 class="col-md-4">

<div> I would like to display image value here after select a value into input text #products dropdownlist </div>

</div>

</div>
</div>

</body>
</html>

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

<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 script fetch . php, которые отправляют ответ на Ajax: 

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

Как улучшить скрипт TypeAhead для отображения значения изображения внутри элемента div после выбора значения из входного текста # products выпадающий список?

1 Ответ

1 голос
/ 10 января 2020

Вы можете сделать это при изменении с помощью jquery ajax, например,

Html и jquery пример 

$(document).ready(function() {
    $("#categoryFK").change(function() {
        var src = $(this).val();
        $("#result").html(src ? "<img src='path/to/your/image/" + src + ".jpg'>" : "");
    });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="categoryFK" name="categoryFK" required>
        <option name="cat-1" value="cat-1">cat-1</option>
        <option name="cat-2" value="cat-2">cat-2</option>
    </select>
<div id="result"></div>
...