使用 Typeahead.js 和 JSON 键值更新隐藏的输入字段答案

【问题标题】：Update a hidden input field with Typeahead.js and JSON key values使用 Typeahead.js 和 JSON 键值更新隐藏的输入字段
【发布时间】：2015-09-13 18:15:13
【问题描述】：

我在页面上有一个有效的 typeahead 元素，它从远程 url 获取数据，该 url 返回一个 JSON 字符串，例如 [{"id":"1","name":"Ben"},{"id":"2","name":"Josh"}]。

我希望使用相应的 ID 号更新隐藏字段。我当前的预输入设置如下

$('.typeahead').typeahead({
name: 'typeahead',
remote: {
  url: 'backend/clients.php?query=%QUERY',
  filter: function(data) {
    var resultList = data.map(function(item) {
      return item.name;
    });
    return resultList;
  }
}
});

【问题讨论】：

标签： javascript jquery json typeahead.js

【解决方案1】：

您可以为选择建议时触发的自定义事件 typeahead:select 绑定处理程序。事件处理程序将使用 2 个参数调用：jQuery 事件对象和选择的建议对象。根据选择的值更新隐藏字段。

var resultList, d;
$('.typeahead').typeahead({    
    name: 'typeahead',
    remote: {
      url: 'backend/clients.php?query=%QUERY',
      filter: function(data) {
        d = data;
        resultList = data.map(function(item) {
          return item.name;
        });
        return resultList;
      }
    }    
}).on('typeahead:select', function(ev, suggestion) {
     $('#hidden-input').val(suggestion.id);
    // $('#hidden-input').val(d[resultList.indexOf(suggestion)].id);
});

参考：https://github.com/twitter/typeahead.js/blob/master/doc/jquery_typeahead.md#custom-events

【讨论】：

我认为：$('#hidden-input').val(d[resultList.indexOf(suggestion)].id);可以更简单地替换为： $('#hidden-input').val(suggestion.id);