如何让Bootstrap Typeahead搜索结果可点击并关联对应ID的Href

我来帮你搞定这个问题！你当前的代码只返回了纯标题文本，既没携带对应的post_id，也没把搜索结果处理成可跳转的链接，咱们一步步修改：

1. 修改PHP代码：返回包含标题和ID的完整数据 #

首先要让后端返回包含title和post_id的对象数组，而不是单纯的标题字符串数组，这样前端才能拿到跳转需要的ID：

$array = array();
$query = $bdd->prepare("SELECT title, post_id FROM post");
$query->execute();
while($row = $query->fetch()) {
    // 把标题和对应的post_id一起存入数组
    $array[] = array(
        'title' => $row['title'],
        'post_id' => $row['post_id']
    );
}
echo json_encode($array);

2. 修改JavaScript代码：处理数据并实现跳转/链接渲染 #

接下来要调整前端的Typeahead配置，让它能识别返回的对象数据，同时实现点击跳转的功能。这里提供两种方案，你可以根据需求选择：

方案一：选中选项后自动跳转 #

这种方案保留Typeahead的默认选中逻辑，用户选中某个结果（点击或回车）后自动跳转到对应文章页面：

$(document).ready(function(){
    $('#name').typeahead({
        source: function(query, result) {
            $.ajax({
                url:"search.php",
                dataType:"json",
                success:function(data) {
                    // 直接返回完整的对象数组，无需额外映射
                    result(data);
                }
            })
        },
        // 指定下拉列表中显示的文本为item的title字段
        displayText: function(item) {
            return item.title;
        },
        // 选中选项时触发的逻辑：跳转对应文章页面
        updater: function(item) {
            window.location.href = `post.php?id=${item.post_id}`;
            // 返回标题填充到输入框（可选，不需要可以删除此行）
            return item.title;
        },
        // 可选：设置下拉列表最多显示10个结果
        items: 10
    });
});

方案二：把下拉选项直接渲染成可点击链接 #

这种方案会把每个搜索结果做成独立的链接，用户点击链接就能直接跳转，无需先选中填充输入框：

$(document).ready(function(){
    $('#name').typeahead({
        source: function(query, result) {
            $.ajax({
                url:"search.php",
                dataType:"json",
                success:function(data) {
                    result(data);
                }
            })
        },
        displayText: function(item) {
            return item.title;
        },
        // 自定义下拉列表的渲染逻辑，把每个选项做成<a>标签
        renderer: function(items) {
            const $ul = $('<ul class="typeahead dropdown-menu"></ul>');
            $.each(items, function(i, item) {
                $('<li></li>')
                    .append(`<a href="post.php?id=${item.post_id}">${item.title}</a>`)
                    .appendTo($ul);
            });
            return $ul;
        },
        items: 10
    });
});

注意事项 #

• 确保你使用的Bootstrap Typeahead版本支持上述配置项（displayText、updater、renderer），Bootstrap 3.x及之前的版本都是支持的；
• 如果测试时没看到下拉结果，打开浏览器控制台检查AJAX请求是否成功、返回的JSON格式是否正确。

内容的提问来源于stack exchange，提问作者El virtuos