Twitter typeahead not matching correctly when using "remote", but working with "local" JSON

Question

I'm creating an autocomplete in Laravel 4 using twitter typeahead, but I'm having problems in the matching process.

The JS code:

$('#autocomplete').typeahead({
  limit: 20,
  name: 'destinatari',
  prefetch: '{{URL::to("alumni/posta/utenti")}}',
  remote: '{{URL::to("alumni/posta/utenti")}}'
});

The model populates the array like this:

public static function jsonList($idLogged)
{
  $users = DB::table('users_data')
             ->where('userid', '!=', $idLogged)
             ->select('nome', 'nome_2', 'cognome', 'cognome_2', 'userid')
             ->orderBy('cognome', 'asc')
             ->orderBy('nome','asc')
             ->get();
  $i = 0; 
  $ordered = array();
  foreach($users as $u) {
     $ordered[$i]['value'] = $u->nome.' '.$u->nome_2.' '.$u->cognome.' '.$u->cognome_2;
     $ordered[$i]['tokens'] = array($u->nome, $u->cognome);
     $ordered[$i]['userid'] = $u->userid;
     $i++;
  } 
  return $ordered;       
}

And my controller simply:

return Response::json( Users::jsonList($this->userdata->id) );

The returned json (I see it in Firebug) looks like:

[{"value":"Silvia Miriam Abeyta Carretero","tokens":["Silvia","Abeyta"],"userid":"246"},
{"value":"Malak Julia Abreu Garrido","tokens":["Malak","Abreu"],"userid":"198"},{"value":"Aina  Aguado ","tokens":["Aina","Aguado"],"userid":"243"},
{"value":"Jordi  Alarc\u00f3n ","tokens":["Jordi","Alarc\u00f3n"],"userid":"308"},
{"value":"Aaron Nerea Alejandro ","tokens":["Aaron","Alejandro"],"userid":"49"},
{"value":"Alexia  Alem\u00e1n ","tokens":["Alexia","Alem\u00e1n"],"userid":"306"},
{"value":"Salma  Almaraz ","tokens":["Salma","Almaraz"],"userid":"54"},
{"value":"Alma  Almonte Nev\u00e1rez","tokens":["Alma","Almonte"],"userid":"101"},
{"value":"Daniela  Almonte ","tokens":["Daniela","Almonte"],"userid":"184"}
,....other similar results....]

The problem is that any letter I type only the first name in the list gets autocompleted ("Silvia Miriam Abeyta Carretero") in the input field, but when I type out in full any other name (say, "Daniela Almonte") the field isn't completed and the dropdown keeps showing the whole 20 results, without processing of any kind.

I must say, though, that if I click on a name it gets selected correctly (I'm logging the userid property of the datum ), but still the autocompletion isn't working.

What puzzles me is that If I copy/paste the whole list directly in the JS (taken as is from Firebug), as local property of typeahead() (instead of remote), everything works fine as it should.

What could be causing this? Is it a Laravel response problem? Or is it the typeahead processor (I believe it's in "transport.js" source file, uses jQuery $.ajax()) of the remote url?

It seems like the returned JSON is considered as a single entry, i don't know why since it looks correct to me...

Answer 1

From the typeahead documentation:

$('input.twitter-search').typeahead({
    name: 'accounts',
    prefetch: 'https://twitter.com/network.json',
    remote: 'https://twitter.com/accounts?q=%QUERY'
  });

As you can see, the remote parameter must contains the URL with the query parameter. PHP side, you have to test if the parameter "q" is set and then adapt your request (with a LIKE statement by example) to correctly filter the list.

Otherwise, you can try to remove this remote parameter, maybe it would work with only the prefetch attribute.