typeahead.js showing all results instead of just matching results

Question

I'm having trouble getting typeahead.js to return only results that match the inputted query. For example, if I type in "Facebook" to my company search bar, it will return all companies ("Yahoo", "Google", etc.) even though most of these don't match the query. I am not doing any server side processing of data. Should my datumTokenizer function take care of this filtering?

Also, I notice that every time I modify the query, it enters the filter() function for each datum. So when I change the query from "G" to "Go," the console.log() statement in filter: function (companies_list) will print 3000 times.

Here is my code:

var companies = new Bloodhound({
    datumTokenizer: function (datum) {
      return Bloodhound.tokenizers.whitespace(datum.name);
    },
    queryTokenizer: Bloodhound.tokenizers.whitespace,
    remote: {
      url: '/json/company_list.json',
      filter: function (companies_list) {
        // Map the remote source JSON array to a JavaScript object array
        return $.map(companies_list, function (company) {
          console.log('mapping')
          return {
            name: company.name
          };
        });
      }
    }
  });

  // Initialize the Bloodhound suggestion engine
  var promise = companies.initialize();
  promise.done(function() {console.log('Bloodhound initialized!')});

  // passing in `null` for the `options` arguments will result in the default
  // options being used
  $('#form-company').typeahead(null, {
    name: 'companies',
    displayKey: 'name',
    // `ttAdapter` wraps the suggestion engine in an adapter that
    // is compatible with the typeahead jQuery plugin
    source: companies.ttAdapter()
  });

And an example of what my url is returning:

[{"name": "Yahoo"}, {"name": "Sanchai Technologies "}, {"name": "Oliver Wyman"}, {"name": "University of Oregon"}, ...]

I am using remote because prefetch absolutely does not work for me. It only gives me the suggestion [object Object], which makes no sense. I would like to use prefetch/remote to load the entire .json file upon initialization, and not make any further requests to the server. So I think prefetch is the better option of me (small file, 77kB), but it's just not working at all.

Thanks v much for the help!

What version of `typeahead` are you using? I don't think `prefetch` works anymore fyi, see [Migrating to typeahead.js v0.10.0](https://github.com/twitter/typeahead.js/blob/master/doc/migration/0.10.0.md). I can't help with why all results are being returned with `remote`, i'm troubleshooting the same issue. — user1063287, Feb 03 '15 at 09:27
Did you work this out? I get the same behaviour but only on a Bloodhound using a filter as you have. — BigMikeW, Apr 21 '17 at 00:21

score 0 · Answer 1 · edited May 23 '17 at 11:47

I think you are missing "Prepare". Try something like I did

var information = {
    url: urlRoot,
    prepare: function (query, settings) {
        settings.type = "POST",
        settings.url += '?prefix=' + query;
        return settings;
    }
};
var names = new Bloodhound({
    datumTokenizer: Bloodhound.tokenizers.obj.whitespace('navn'),
    queryTokenizer: Bloodhound.tokenizers.whitespace,

    remote: information,

});

Or, you can look at my post there. It is only returning the result that a user enter into the text box. My Stackoverflow post

score 0 · Answer 2 · answered Apr 21 '17 at 05:29

I had this problem too. The problem is that the remote URL returns a standard list, there's no ability to pass the query to it so that it returns a filtered subset that match the search term. Because of this the filter implementation must handle filtering results so that they match the query.

typeahead.js showing all results instead of just matching results

2 Answers2