PHP, Jquery передает значение выбранного продукта в режиме реального времени поиска

Question

изображение окна поиска

Я использую скрипт поиска в реальном времени jquery, но он передает только имя_продукта, как мне заставить его передать идентификатор_продукта и оповестить этот идентификатор в jquery?

JS

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

    $('input.typeahead').typeahead({
        name: 'typeahead',
        remote:'search.php?key=%QUERY',
        limit : 10
    }); 

    $('.typeahead').on('change', function () {
        alert($(this).val());// outputs only the text i have typed
    });//how do i get the product_id from php request?

});
</script>

PHP

<?php
    $key=$_GET['key'];
    $array = array();
    $con=mysqli_connect("localhost","root","","products");
    $query=mysqli_query($con, "select * from products where product_name LIKE '%{$key}%'");
    while($row=mysqli_fetch_assoc($query))
    {
        $array[] = $row['product_name'];
        //$array[] = $row['product_id'];//How do i pass this value with the product name and alert it in JS?
    }
    echo json_encode($array);
    mysqli_close($con);
?>

HTML

<div class="bs-example">
<input type="text" name="typeahead" class="typeahead tt-query" autocomplete="off" spellcheck="false" placeholder="Type your Query">
</div>

Вывод из автоматического заполнения выпадающего списка поиска (см. Изображение):

<p>First Product</p>// this has an id of "1" but need to pass it from php and retrieve it with jquery.