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，则很容易。

使用PHP和MYSQL的jQuery UI自动完成搜索栏

3 个答案: