Javascript JQuery/AJAX/PHP live search未按预期工作

我使用了

AJAX

livesearch教程，如上所示。这取决于

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

请帮帮我！

---

这与您的问题没有直接关系，但需要注意的是：您的查询容易受到SQL注入攻击。了解如何使用参数化查询和准备好的语句来保护数据库。有关此问题的简单解释，以及PHP中有关如何安全使用参数的一些示例，请参见。这与您的问题没有直接关系，但需要注意的是：您的查询容易受到SQL注入攻击。了解如何使用参数化查询和准备好的语句来保护数据库。有关该问题的简单解释，以及PHP中有关如何安全使用参数的一些示例，请参见。

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

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

});