JQuery / AJAX / PHP实时搜索无法正常工作

Question

我已使用https://codeforgeek.com/2014/09/ajax-search-box-php-mysql/上显示的AJAX实时搜索教程。这取决于typeahead.min.js以及JQuery和Bootstrap。

问题是，它并不总是得到href链接（它的错误），以及点击结果后，它用整个href链接填充输入字段，这是我不想要的。我只想导航到那个页面。我觉得我的问题可能与JQuery / JS有关。请参阅下面的屏幕截图。

我修改了PHP以使用PEAR分机进行DB次调用，并将其扩展为包含返回结果中的链接。

下面是一些用于处理搜索的PHP文件。

$key=$_GET['key'];

$search_results_array = array();


$sql = "SELECT * FROM `Product_Data` WHERE `Product_Name` LIKE '%{$key}%' OR `Product_Tags` LIKE '%{$key}%' ORDER BY `Product_Sequence` ASC";

$q = $db->query($sql);
if (PEAR::isError($q)) {
showError ($q);
exit;
}

$numRows = $q->numRows();

while ($row = $q->fetchRow()) {

  $product_name = $row['Product_Name'];
  $product_id   = $row['Product_ID'];
  $search_results_array[] = "<a href='/index.php?page=purchase&product_id=$product_id' class='livesearch_link'>$product_name</a>";

}

print json_encode($search_results_array);

HTML：

<div class="col-md-6">
<div class="panel panel-default">
<div class="bs-example">
    <input type="text" name="typeahead" class="typeahead tt-query" autocomplete="off" spellcheck="false" placeholder="Search">
</div>

  

而JQuery（这是我怀疑问题所在的地方）：

<script>
$(document).ready(function(){
$('input.typeahead').typeahead({
    name: 'typeahead',
    remote: '/manage/process_ajax_search.php?key=%QUERY',
    limit : 10,
});


}); 

$(document).on('click','.tt-suggestion .livesearch_link',function(e){

e.preventDefault();

var href = $(this).attr('href');
window.location.replace(href);

return false;

});

请帮帮我！