使用PHP和MYSQL通过jquery ui autocomplete搜索栏

Question

我想在我的网站上添加一个搜索栏，所以我添加了jQUery UI自动完成搜索，它就像一个魅力，结果显示在数据库中。但是，如果用户点击列表中的结果我想将用户重定向到该产品页面，我需要。这是navigation.php中的代码：

<div id="search-div">
  <form action="#" id="form-search" method="POST" class="form-inline">
    <input id="language" type="text" placeholder="Search for a product" style="padding-left:15px;">
    </form>
</div>

<script>
$("#language").autocomplete({
  appendTo: $("#language").parent(),
  source: function(data, cb){
    $.ajax({
      url: '/tutorial/admin/parsers/ajax.php',
      method: 'GET',
      dataType: 'json',
      data: {
        title: data.term
      },
      success: function(res){
      cb(res);
      }
    });
  }
});
</script>

这是ajax.php代码：

<?php
require_once $_SERVER['DOCUMENT_ROOT'].'/tutorial/core/init.php';
$data = array();
if (!empty($_GET['title'])) {
  $title = strtolower(trim($_GET['title']));
  $sql = "SELECT title FROM products WHERE title LIKE '" .$title. "%'";
  $result = $db->query($sql);
  while ($row = mysqli_fetch_assoc($result)) {
    array_push($data, $row['title']);
  }
}
echo json_encode($data);
exit;
 ?>

我希望用户重定向到的页面是products.php？details = 20其中20是产品的ID，它是GET方法页面。如果用户从搜索列表中点击此产品，如何能够根据ID重定向产品页面？

Answer 1

试试这个：

  $(document).ready(function() {
    $("#language").autocomplete({
        source: function(data, cb){
    $.ajax({
      url: '/tutorial/admin/parsers/ajax.php',
      method: 'GET',
      dataType: 'json',
      data: {
        title: data.term
      },
      success: function(res){
      cb(res);
      },
        select: function( event, ui ) {
            window.location.href = ui.item.link;
        }
    });
});

Answer 2

select: function(event, ui) {
   doSearch(ui.item.title);
}

function doSearch(term) {
    window.location.href = 'Search.php?q=' + term;
}

search.php是您的控制器或包含业务逻辑文件。您可以根据需要传递查询参数。

Answer 3

我不知道如何在jquery ui自动完成中执行此OLD link可能会有所帮助。但如果你可以使用Twitter Typeahead而不是JQ UI，这很容易。