How to display image inside a div after select a value from input text TypeAhead plugin?

Question

I'm using a dynamic dependent Twitter-TypeAhead where an input text is populated after user select a value into a html select box. I would like to get a value after user select an option on input text dropdownlist and display this value in a div using php or jquery. Actually the value that i would like to display inside a div is from product table "image" column.

To do this, i created a table that call products and his structure is like below:

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

--> the table products contain one foreing key that call categoryFK

And to display the values above, i have an index page that contains one select box that is populated with php code and one input text that is populated with TypeAhead plugin when user select a value inside select box:

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

And below the Ajax script that send request to php script (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>

And finally, the php script fetch.php that send response to 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);
    }
}
?>

How to improve TypeAhead script to display image value inside a div after select a value from input text #products dropdownlist?

score 1 · Answer 1 · answered Jan 10 '20 at 15:54

1

You can do that on change with jquery ajax like this

Html and jquery example

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

answered Jan 10 '20 at 15:54

Thanks for your answer Dilek. I'm using Typeahead Plugin and i'm trying to adapt your solution to my script. Actually i need to get a database value after select value into input text with typeahead and display this value into a div. I.e: On example above, i select "Nike Tenis" and then display the image 001.jpg that is related with "Nike Tenis". Is it possible? Thanks again. – Michel Xavier Jan 11 '20 at 19:00
1

@MichelXavier yes, see how to inject in your codes here is detailed example : https://stackoverflow.com/questions/31771639/display-image-from-dynamic-drop-down-list-box Note : JS used in that example – Jan 11 '20 at 19:11

How to display image inside a div after select a value from input text TypeAhead plugin?

1 Answers1