自定义两列类型ahead.js

Custom two-column typeahead.js

本文关键字：类型 ahead js 两列 自定义      更新时间：2023-09-26

有可能用两列来实现真正自定义的typeahead.js布局吗？

我正在实现人员查找。如果找不到此人或此人类型错误，我希望用户能够选择该选项。预先打印的下拉列表可能看起来像这样：

jo
--------------------------------
| Joe     | Not found          |
| John    | Wrong type         |
| Joseph  | Some other problem |
| Jose    |                    |
--------------------------------

当用户键入"jo"时，会有一个匹配人员的列表，他们可以向下箭头并点击回车键来选择一个。或者用户可以向右箭头到右列，向下箭头到适当的问题，然后点击回车键。

这可能吗？我在typeahead js文档中看到的只是每个选项都有一个自定义模板的能力，但没有关于多列的功能。

这是模板渲染的示例。这就是你要找的吗？

$('#custom-templates .typeahead').typeahead(null, {
  name: 'best-pictures',
  display: 'value',
  source: bestPictures,
  templates: {
    empty: [
      '<div class="empty-message">',
        'unable to find any Best Picture winners that match the current query',
      '</div>'
    ].join(''n'),
    suggestion: Handlebars.compile('<div><strong>{{value}}</strong> – {{year}}</div>')
  }
});
相关文章：