使用jquery-typeahead实现仅按键值对的值搜索并存键到隐藏域

问题根源 #

你当前的数据源格式不符合jquery-typeahead的默认要求：插件默认要求source.data是每一项对应一个联想选项的数组，而你把所有键值对都塞进了数组的第一个对象里，同时没有指定要展示的字段，因此无法正常渲染选项。

第一步：预处理原始数据源 #

先把你拿到的原始键值对结构转成插件可识别的数组格式：

// 原始数据源
const rawData = {
  field_111: "Some text",
  field_123: "Example text 2",
  field_134: "Text 123"
};

// 转换为插件适配的结构，每个选项对应一个对象，同时存储原始键和展示值
const processedData = Object.entries(rawData).map(([key, value]) => ({
  optionKey: key,
  optionValue: value
}));

第二步：修改typeahead初始化配置 #

新增展示字段指定，以及选中后的回调逻辑，将对应键存入隐藏域，完整配置如下：

$('.testinput').typeahead({
  order: "desc",
  limit: 5,
  hint: true,
  highlight: true,
  minLength: 1,
  autocomplete: "on",
  cancelButton: true,
  // 指定联想列表展示的字段为我们转换后的展示值字段
  display: ["optionValue"],
  source: {
    data: processedData // 传入预处理后的数组
  },
  callback: {
    onInit: function(node) {
      console.log('Typeahead Initiated on ' + node.selector);
    },
    onSearch: function (node, form, item, event) {
      console.log(item);
    },
    // 新增选中选项后的回调
    onClickAfter: function (node, a, item, event) {
      // 替换.hidden-key为你实际的隐藏域选择器，将原始键存入隐藏域
      $('.hidden-key').val(item.optionKey);
    }
  }
});

补充说明 #

如果你的数据源是异步接口返回的，可以在接口请求成功的回调中先完成上述数据预处理，再初始化插件，或者在source的ajax配置的返回回调中处理数据即可。如果需要自定义联想项的展示样式，可以配置template参数自定义每一项的渲染HTML。

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