Multiple Remote Sources with Twitter Typeahead.js

Question

I'm using the Twitter typeahead.js library for typeahead search with a single data source /api/domains.

I'd now like to add two more sources using other API endpoints:

• /api/ips
• /api/hostnames

How would I accomplish this? Do I need to use the BloodHound engine for this functionality?

Existing Code

<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>

Existing API response

{
  domains: [
    "a.com",
    "b.com",
    "c.com",
    "d.com" ]
}

Answer 1

Do you want the suggestions differentiated by the source? I would expect so, since one source is domains, one is IP addresses (I presume?) and the other is hostnames. The first two I would expect someone to be typing in very different entries and getting back very different data.

Anyway, that's frequently how I use typeahead - similar searches but with multiple sources - and yes I use Bloodhound to set up each source. Then for each bloodhound source I have a separate JSON object in the typeahead setup. Like this:

    $('#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>"
      }
    }
    ...