Twitter Typeahead.js的多个远程源

如何解决Twitter Typeahead.js的多个远程源

我正在使用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" ]
}

解决方法

您希望根据来源区分建议吗？我希望如此，因为一个来源是域，一个是 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>"
      }
    }
    ...