使用 Twitter Typeahead.js 的多个远程源
Posted
技术标签:
【中文标题】使用 Twitter Typeahead.js 的多个远程源【英文标题】:Multiple Remote Sources with Twitter Typeahead.js 【发布时间】:2020-12-22 21:38:22 【问题描述】:我正在使用 Twitter typeahead.js 库通过单个数据源 /api/domains
进行预输入搜索。
我现在想使用其他 API 端点再添加两个源:
/api/ips
/api/hostnames
我将如何做到这一点?我需要使用 BloodHound 引擎来实现此功能吗?
现有代码
<script>
$('#header').on('click', '.tt-selectable', function()
window.location.href = "/explore/" + $(this).attr('data-domain');
);
var substringMatcher = function(strs)
return function findMatches(q, cb)
var matches, substringRegex;
// an array that will be populated with substring matches
matches = [];
// regex used to determine if a string contains the substring `q`
substrRegex = new RegExp(q, 'i');
// iterate through the pool of strings and for any string that
// contains the substring `q`, add it to the `matches` array
$.each(strs, function(i, str)
if (substrRegex.test(str))
matches.push(str);
);
cb(matches);
;
;
$.getJSON('/api/domains')
.done(function( json )
populateSuggestions(json.domains);
)
.fail(function( jqxhr, textStatus, error )
var err = textStatus + ", " + error;
console.log( "Request Failed: " + err );
);
const populateSuggestions = function(data)
$('.typeahead').typeahead(
hint: true,
highlight: true,
minLength: 1
,
displayKey: 'name',
limit: 10,
source: substringMatcher(data),
templates:
suggestion: function (data)
return "<div data-domain=" + data + ">" + data + "</div>"
);
</script>
现有 API 响应
domains: [
"a.com",
"b.com",
"c.com",
"d.com" ]
【问题讨论】:
【参考方案1】:您想要根据来源区分的建议吗?我希望如此,因为一个来源是域,一个是 IP 地址(我猜?),另一个是主机名。前两个我希望有人输入非常不同的条目并返回非常不同的数据。
无论如何,这就是我经常使用 typeahead 的方式 - 类似的搜索但有多个来源 - 是的,我使用 Bloodhound 来设置每个来源。然后对于每个寻血猎犬源,我在预输入设置中有一个单独的 JSON 对象。像这样:
$('#searchbox .typeahead').typeahead(
hint: true,
highlight: true,
autoselect: true,
minLength: 2
,
name: 'other',
display: 'addr',
source: otherBH,
templates:
header: "<span class='typeahead-header'>Static</span>"
,
name: 'lookupSvc',
display: 'lookupSvc',
source: lookupServiceBH,
templates:
header: "<span class='typeahead-header'>AJAX</span>"
...
【讨论】:
以上是关于使用 Twitter Typeahead.js 的多个远程源的主要内容,如果未能解决你的问题,请参考以下文章
Twitter 的 typeahead.js 建议没有样式(没有边框、透明背景等)
使用 Twitter Typeahead.js 的多个远程源
Twitter Typeahead.js:单击/聚焦时显示所有选项
typeahead 表单,为用户提供提示或数据。自动补全typeahead.js
Twitter typeahead.js:可以使用 Angular JS 作为模板引擎吗?如果不是,我该如何替换 Hogan/Mustache js 的“”?