将动态变量传递给 Autocomplete.js 中的 highlightResults

Question

我正在为我的 Vue 应用程序构建一个 typeahead 组件来搜索 Algolia，它有几个不同的索引可以在不同的地方搜索，所以我创建了要传入的道具以设置输入占位符、搜索索引、和显示键。

除了我的建议突出显示功能外，一切都很好。

我确定这很简单，但我无法突出显示 return 来获取传入的动态道具。

$('.typeahead').autocomplete({ hint: false }, [{
    source: $.fn.autocomplete.sources.hits(this.client, { hitsPerPage: 5 }),
    displayKey: this.display,
    templates: {
        suggestion: (suggestion) => {
            return suggestion._highlightResult.{this.display goes here}.value;
        }
    }
}]).on('autocomplete:selected', (event, suggestion, dataset) => {
    console.log(suggestion, dataset);
})

如果我省略突出显示，一切都完美无缺。

Answer 1

我知道这很简单，通过数组键而不是点符号来调用它。

return suggestion._highlightResult[this.display].value;

将动态变量传递给 Autocomplete.js 中的 highlightResults

Pass Dynamic Variable to highlightResults in Autocomplete.js

autocomplete

algolia

vuejs2