带有链接的 JQuery 自动完成

Posted 2023-02-24

【中文标题】带有链接的 JQuery 自动完成

【英文标题】：JQuery auto complete with links

【发布时间】：2015-06-17 00:49:46

【问题描述】：

我正在建立一个网站，该网站使用 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 并成为可点击链接的最佳方法是什么？

【问题讨论】：

这是什么$(function locationsearch()

对不起@JqueryKing，这只是我函数文件的摘录。我更新了我的问题以避免混淆。

【参考方案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']
    );

【讨论】：

您知道有什么方法可以在页面重定向时阻止 ID 号显示在文本区域中吗？

我不太确定您指的是什么 textarea。您可能需要展示您的 html 和整个代码。

对不起，用户输入搜索查询的搜索框。当用户点击想要的结果时，ID号会显示在搜索框中

尝试反转$return_arr[]数组（先设置label再设置value）

不幸的是，这不起作用。我的代码很乱。我想我需要添加一个隐藏的文本框来存储页面 ID。如果我成功了，我会报告。