How to manage an array of hashes with typeahead.js

Question

I may be using the wrong tools for this, so please recommend other approaches if they're appropriate. I'm fairly certain that my problem is in my typeahead method rather than the bloodhound method.

I need to search by personName, but populate personId for a form submission. I have a working controller method that passes the results as an array of hashes with id and name. A sample result looks like:

[{"1":"Nominee Employee"},{"2":"User Employee"}]

I can't find docs that address my need. I know that the bloodhound code is calling my controller method because the logs show the query happening. I just don't see anything that says 'here's how you get a specific attribute from a record to display.'

var names = new Bloodhound({
    datumTokenizer: Bloodhound.tokenizers.obj.whitespace('name'),
    queryTokenizer: Bloodhound.tokenizers.whitespace,
    remote: {
        url: '/employee/lastNameOptions?term=%QUERY',
        wildcard: '%QUERY'
    }
});

 $('#bloodhound .typeahead').typeahead(null, {
     name: 'names',
     display: 'name',
     source: names
 });

I would expect the current implementation to at least try to print 1: Joe Schmo but it's loading an empty dropdown box, so it must 'be aware' of results.

Thanks!

score 0 · Answer 1 · answered Jul 14 '15 at 00:23

I believe you can filter the results in bloodhound like this

remote: {
  url: '/employee/lastNameOptions?term=%QUERY',
  wildcard: '%QUERY',
  filter: $.map(data, function(v, i){ 
    var o = Object.keys(v); 
    return { id: o[0], name: v[o[0]] }; 
  });
}

This will format the data into an object like this

{
  "id": "1",
  "name": "Nominee Employee"
}

typeahead can be modified like this

$('#bloodhound .typeahead').typeahead(null, {
     name: 'names',
     displayKey: 'name',
     source: names
 });

How to manage an array of hashes with typeahead.js

1 Answers1