使用 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 的多个远程源

Twitter Typeahead.js:单击/聚焦时显示所有选项

typeahead 表单,为用户提供提示或数据。自动补全typeahead.js

Twitter typeahead.js:可以使用 Angular JS 作为模板引擎吗?如果不是,我该如何替换 Hogan/Mustache js 的“”?