调整Running-Coder/jquery-typeahead的AJAX返回格式以获取选中项索引

嘿，我来帮你搞定这个Running-Coder/jQuery typeahead的索引获取问题！你已经有了基础的运行代码，现在只需要调整后端AJAX返回的数据结构，再配合前端的配置，就能轻松拿到选中项的索引了。

第一步：调整后端MilestoneData.php的返回格式 #

原来的后端可能直接返回了纯文本数组，现在我们需要把每个选项包装成包含index（索引/ID）和显示文本的对象，这样前端就能直接读取索引值。

示例PHP代码：

<?php
// 获取前端传入的搜索关键词
$keyword = isset($_POST['keyword']) ? $_POST['keyword'] : '';

// 模拟你的数据源（实际项目中可能是数据库查询结果）
$milestones = [
    "项目启动",
    "需求分析完成",
    "开发阶段结束",
    "测试通过",
    "上线部署"
];

// 过滤匹配关键词的项（模拟搜索逻辑）
$filteredItems = array_filter($milestones, function($item) use ($keyword) {
    return empty($keyword) || strpos(strtolower($item), strtolower($keyword)) !== false;
});

// 转换为带索引的结构化数据
$result = [];
foreach ($filteredItems as $index => $item) {
    // 这里的index可以是数组索引，也可以是数据库主键ID（更实用）
    $result[] = [
        "index" => $index,
        "displayText" => $item
    ];
}

// 返回JSON格式数据
header('Content-Type: application/json');
echo json_encode($result);
?>

第二步：修改前端Typeahead配置 #

在你的现有代码中，需要指定display字段（告诉组件显示哪个属性的内容），并在选中回调中读取index值：

function milestoneTypeAheadLookUp () { 
    $.typeahead({ 
        input: '.ms-typeahead', 
        minLength: 1, 
        order: "asc", 
        offset: false, 
        cancelButton: false, 
        hint: true, 
        source: { 
            ajax: { 
                type: "POST", 
                url: 'data/MilestoneData.php', 
                data: function() {
                    // 动态传入当前输入框的关键词，替代固定的"null"
                    return { keyword: $('.ms-typeahead').val() };
                }
            } 
        },
        // 指定要显示的字段，对应后端返回的displayText
        display: 'displayText',
        // 选中项时的回调函数，这里可以直接获取索引
        onSelect: function(selectedItem) {
            // 拿到选中项的索引
            const selectedIndex = selectedItem.index;
            // 拿到选中项的显示文本
            const selectedText = selectedItem.displayText;
            
            // 这里可以添加你的业务逻辑，比如把索引存入隐藏域
            console.log('选中项索引：', selectedIndex);
            console.log('选中项内容：', selectedText);
        }
    });
}

关键说明 #

• 后端返回的每个元素必须是包含index和显示字段的对象，这样前端才能正确解析
• 前端的display属性必须和后端返回的显示字段名一致（比如上面的displayText）
• 如果你的索引是数据库的主键ID，只需要把PHP里的$index换成数据库返回的ID即可，实用性更强

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