Autocompletion dans un input

Avec Laravel et bootstrap typeahead j’ai essayé de simplifier au maximum la réutilisation de l’autocomplétion dans un input de formulaire. Oui, en tant que bon programmeur, je suis fainéant :) le moins de code possible.

Laravel avec son helper Form propose d’enregistrer des macros pour nous simplifier la vie. j’ai donc écrit une petite macro inputAutoComplete qui va écrire dans la vue le tag input avec un peu de javacript. cette macro prend en parametres le non du champ mais surtout l’url du serveur qui nous retournera le tableau de type json.

Form::macro('inputAutoComplete', function($name, $options, $url, $limit=32) {
        $html= '<input type="text" name="'.$name.'" id="'.$name.'" class="typeahead" ';
        foreach($options as $attr=>$value) $html.=' '.$attr.'="'.$value.'"';
        $html.=' autocomplete="off" />
    <script>
      $(document).ready(function() {
            $("input#'.$name.'").typeahead([{
                prefetch: "'.$url.'",
                limit: '.(int)$limit.' //, minLength: 2
            }]);
      });
      </script>    
    ';
        return $html;
    });

Dans notre vue Blade, intégrons notre input. Et oui juste une url a mettre en plus qu’un input classique :)

{{ Form::inputAutoComplete('pays',array('placeholder'=>'..'), URL::to('json/test') ) }}

Pour l’envoi de données test, dans app/routes.php j’ai ajouté ces quelques lignes :

Route::get('json/test', function() {
    $tab=array('malauto','maldive','france','angleterre','amerique','auto');
    return Response::json($tab);
});
Share Button

Vous devriez aimer...