Twitter TypeAhead: How to improve my code to display thumbnails?

Question

I'm using Twiter-Typeahead plugin (http://twitter.github.io/typeahead.js/examples/#custom-templates) to display values into input text and i would like to improve my code to display thumbnails.

I found some questions that are similar to my doubt but unfortnatly i didn't get the correct way to do this:

Below are the code that display one select box that are populated with PHP code and one intput text that is populated with typeahead.js. After selected a value into select box (category), the input text field is populated with Twitter-TypeAhead based on category selected value:


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


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

<script type="text/javascript">
        var products;

        $ ( function ()
        {
            $('#category').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 below are the PHP script 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);
    }
}
?>

Both code above works fine but i would like to improve then to insert image thumbnails into dropdownlist.

Below are my sql table (products) structure that is based on code above:

id | productName | categoryFK | image
---------------------------------------
1  | Beef ball   | Meat       | 001.jpg
2  | Bigoli      | Cereals    | 002.jpg
3  | Orange      | Fruit      | 003.jpg

In this case, how could i improve my code to display image thumbnails using typeahead?

Thanks.

Your code is vulnerable to [**SQL injection**](https://en.wikipedia.org/wiki/SQL_injection) attacks. Do not rely on the `real_escape_string()` functions, instead always use [**prepared statements**](https://secure.php.net/manual/en/pdo.prepare.php) with [**bound parameters**](https://secure.php.net/manual/en/pdostatement.bindparam.php). See [**this page**](https://phptherightway.com/#databases) and [**this post**](https://stackoverflow.com/questions/60174/how-can-i-prevent-sql-injection-in-php) for some good examples. — Alex Howansky, Jan 08 '20 at 20:08
Thanks for your feedback Alex. I'm noob in php and in this case, how could you improve this php code? How can i replace real_escape_string? `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); } } ?>` — Michel Xavier, Jan 09 '20 at 15:33

Twitter TypeAhead: How to improve my code to display thumbnails?

0 Answers0