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 以显示 objects 的数组。我不太确定该怎么做。

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

Answer 1

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

ui (Type: Object):

item (Type: Object):

An Object with label and value properties for the selected option.

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']
    );
}

JQuery 自动完成链接

JQuery auto complete with links

javascript

php

mysql

jquery

pdo