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