带有链接的 JQuery 自动完成

Question

我正在建立一个网站，该网站使用 JQuery 的自动完成功能向用户提供有关页面的建议。我将页面 ID 和标题存储在 SQL 数据库中（使用 PDO 连接）。目前，我已经让自动完成功能正常工作，但是，我完全不知道如何让自动完成列表变成可点击的链接，这些链接根据数据库中的页面 ID 将用户引导到相关页面。

这是我的 search.php 文件

    <?php
require('includes/connect.class.php');
if (isset($_GET['term'])) {
        $return_arr = array();
        try {
                $stmt = $conn->prepare('SELECT id, locationName FROM locations WHERE locationsName LIKE :term');
                $stmt->execute(array(
                        'term' => '%' . $_GET['term'] . '%'
                ));
                while ($row = $stmt->fetch()) {
                        $return_arr[] = $row['locationName'];
                }
        }
        catch (PDOException $e) {
                echo 'ERROR: ' . $e->getMessage();
        }
        echo json_encode($return_arr);
}
?>

和我的 JavaScript

$(function() {
    $(".locationlist").autocomplete({
        source: "search.php",
        minLength: 1
    });            
});

数据库如下所示

Locations
|---ID---||---locationName---|
|   1    ||       Test1      |
|   2    ||       Test2      |
 ----------------------------

我做了一些研究，我认为我需要修改 JQuery 来显示对象数组。我不太确定该怎么做。

让我的自动完成列表从 SQL 数据库中获取页面 ID 并成为可点击链接的最佳方法是什么？

Answer 1

您实际上并不需要那里的可点击链接。您可以在自动完成的 select event 中重定向页面，您可以在其中访问选定的 item 对象：

• ui（类型：对象）：
  • item（类型：对象）：
    • 一个具有label和value属性的对象。

---

ui.item.value 将是您的 PHP 生成的页面 ID

$(".locationlist").autocomplete({
    source : "search.php",
    minLength: 1,
    select : function(event, ui){
        // You may need to change this part, as I don't know the exact values:
        location.href = "http://your-site.com/" + ui.item.value;
    }
});   

---

至于你的 PHP，你可以像这样修改输出数组：

while ($row = $stmt->fetch()) {
    $return_arr[] = array(
        'value' => $row['ID'],
        'label' => $row['locationName']
    );
}