Search code examples
javascriptbootstrap-typeaheadtypeahead

typeahead.js templating only one result


Can Anybody tell me why only one result is shown? The database returns multiple rows. Only the first one is displayed?

JS:

$('#searchbox').typeahead({
    limit: 10,
    minLength: 2,
    remote: {
      url: '/typeahead?s=%QUERY',

    },
    template: function (data) {
            return '<p>'+ data.name+'</p>';
        }
});

PHP (Laravel):

$input = Input::all();
$results = array();
$getshops = DB::connection('mysql')->select("SELECT id, shop FROM shops WHERE shop LIKE '%".$input['s']."%'");
foreach($getshops as $shop){
    $results[] = array('id' => $shop->id, 'name' => beautifyshops($shop->shop));
}

return Response::json($results);

Solution

  • Use a filter function remote.

    remote: {

                url: '/typeahead?s=%QUERY',
                filter: function(parsedResponse) {
                    return _.map(parsedResponse, function(res){
                        return {
                            value: res,
                        }
                    });
                }
       }
    

    it'll return all the suggestions returned from server.