Twitter Bootstrap Typeahead选中项如何仅获取单个ID而非多个？

我来帮你搞定这个问题！你遇到的情况是因为Typeahead默认匹配到所有符合条件的项后，你的代码可能不小心把所有匹配项的ID都拼接给了隐藏输入框B。要只获取选中那一项的ID，关键是在选中事件里精准定位到当前选中的原始数据项，而不是所有匹配结果。

下面给你两种可行的实现方式，根据你用的Bootstrap Typeahead版本选一个就行：

方式1：用updater方法（适合旧版Typeahead） #

// 你的数据源
const userList = [
  { id: 1, firstname: 'sebastien', lastname: 'renard' },
  { id: 8, firstname: 'sebastien', lastname: 'renard' }
];

// 初始化输入框A的Typeahead
$('#inputA').typeahead({
  source: function(query, process) {
    // 给每个用户项添加显示用的全名，同时保留原始数据
    const displayNames = userList.map(user => {
      user.fullName = `${user.firstname} ${user.lastname}`;
      return user.fullName;
    });
    process(displayNames);
  },
  updater: function(selectedName) {
    // 根据选中的全名找到对应的原始用户对象
    const selectedUser = userList.find(user => user.fullName === selectedName);
    // 给隐藏输入框B设置单个ID
    $('#inputB').val(selectedUser.id);
    // 返回选中的全名到输入框A显示
    return selectedName;
  }
});

方式2：用typeahead:select事件（适合Bootstrap 3+的Typeahead） #

这种方式更清晰，直接监听选中事件拿到完整的用户对象：

const userList = [
  { id: 1, firstname: 'sebastien', lastname: 'renard' },
  { id: 8, firstname: 'sebastien', lastname: 'renard' }
];

$('#inputA').typeahead({
  minLength: 1,
  highlight: true
}, {
  name: 'users',
  // 指定显示的字段
  display: user => `${user.firstname} ${user.lastname}`,
  // 自定义数据源匹配逻辑
  source: (query, syncResults) => {
    const matchedUsers = userList.filter(user => {
      const fullName = `${user.firstname} ${user.lastname}`;
      return fullName.toLowerCase().includes(query.toLowerCase());
    });
    syncResults(matchedUsers);
  },
  // 自定义提示项的模板（可选，让显示更灵活）
  templates: {
    suggestion: user => `<div>${user.firstname} ${user.lastname}</div>`
  }
}).on('typeahead:select', (e, selectedUser) => {
  // 选中时直接取当前项的ID设置到隐藏框
  $('#inputB').val(selectedUser.id);
});

核心思路 #

不管用哪种方式，核心都是让Typeahead能关联到原始的用户对象，而不是只返回显示用的字符串。这样当用户选中某一项时，你能直接拿到该条数据对应的ID，而不会把所有匹配项的ID都凑在一起。

内容的提问来源于stack exchange，提问作者Sébastien Renard