使用typeahead.js多数据集时如何修改输入字段的name属性

嘿，我来帮你解决这个问题～针对你不用Bloodhound的typeahead.js多数据集场景，修改输入字段的name属性分两种情况，看你需求来选：

1. 直接固定修改输入字段的name属性 #

如果你只是想给输入框设置一个固定的name（不管用户选哪个数据集的选项），直接在初始化typeahead前后用jQuery修改就行，完全不影响typeahead的功能：

// 先修改输入框的name属性
$('#search .typeahead').attr('name', 'favorite_team');

// 再初始化你的typeahead多数据集
$('#search .typeahead').typeahead({ 
  hint: true, 
  highlight: true, 
  minLength: 1 
}, { 
  name: 'football_team', 
  source: substringMatcher(football_teams), 
  templates: { header: '<h3>Football teams</h3>' } 
}, { 
  name: 'basketball_team', 
  source: substringMatcher(basketball_teams), 
  templates: { header: '<h3>Basketball teams</h3>' } 
});

当然，你也可以在初始化之后再修改，效果是一样的。

2. 根据选中的数据集动态修改name属性 #

如果想让输入框的name跟着用户选中的数据集变化（比如选足球队时name是selected_football，选篮球队时是selected_basketball），可以监听typeahead的typeahead:selected事件，这个事件会返回选中的数据集信息，用它来动态调整：

$('#search .typeahead').typeahead({ 
  hint: true, 
  highlight: true, 
  minLength: 1 
}, { 
  name: 'football_team', 
  source: substringMatcher(football_teams), 
  templates: { header: '<h3>Football teams</h3>' } 
}, { 
  name: 'basketball_team', 
  source: substringMatcher(basketball_teams), 
  templates: { header: '<h3>Basketball teams</h3>' } 
})
// 监听选中事件
.on('typeahead:selected', function(event, suggestion, dataset) {
  // 根据数据集的name来设置输入框的name
  switch(dataset.name) {
    case 'football_team':
      $(this).attr('name', 'selected_football_team');
      break;
    case 'basketball_team':
      $(this).attr('name', 'selected_basketball_team');
      break;
    // 如果以后加其他数据集，直接在这里加case就行
  }
});

额外小技巧：用隐藏字段区分数据集类型 #

如果不想修改输入框的name，而是想在提交表单时同时拿到选中的团队和它的类型，建议加一个隐藏字段，这样更灵活：

<!-- 在表单里加一个隐藏字段 -->
<input type="hidden" name="team_category" id="team_category">

然后在选中事件里设置它的值：

.on('typeahead:selected', function(event, suggestion, dataset) {
  // 给隐藏字段设置数据集类型
  $('#team_category').val(dataset.name);
  // 输入框的name保持固定，比如叫selected_team_name
  $(this).attr('name', 'selected_team_name');
});

这样表单提交时，就能同时获取到选中的团队名称和它所属的分类啦～

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