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

JQuery自动完成链接

1 个答案: