upful upful - 1 year ago 82
jQuery Question

Search multiple values in array of JSON objects using Typeahead.js + Bloodhound remote

I'm trying to use Typeahead.js (v0.11.1) + Bloodhound to display the results of a query. The query searches a list of users and returns matches based on either

, or
. If I query
the matches look like this:


My Bloodhound engine looks like this:

var userSearch = new Bloodhound({
datumTokenizer: function (user) {
return Bloodhound.tokenizers.obj.whitespace(user.email, user.last_name, user.first_name);
queryTokenizer: Bloodhound.tokenizers.whitespace,
remote: {
url: '/search/users?query=%QUERY',
wildcard: '%QUERY'

The problem is Typeahead only shows a match when there is one JSON object, if it returns an array of objects, like the example above, then no matches.

I tried adding a
to the
, but then no matches were returned at all:

transform: function(users) {
return $.map(users, function(user) {
return {
email: user.email,
last_name: user.last_name,
first_name: user.first_name

Answer Source

The problem was with the datumTokenizer, you must concatenate the tokens like this:

datumTokenizer: function (user) {
    var emailTokens = Bloodhound.tokenizers.whitespace(user.email);
    var lastNameTokens = Bloodhound.tokenizers.whitespace(user.last_name);
    var firstNameTokens = Bloodhound.tokenizers.whitespace(user.first_name);
    return emailTokens.concat(lastNameTokens).concat(firstNameTokens);

Also you still need to use the transform on the remote. But now you can match an any of the three properties from each JSON object.