f4b1.com
***

Comment utiliser Autocomplete de jQuery dans le framework Laravel

By Admin on 2017-03-17 16:08:28

Nombre de vues : 1193


Je vais probablement vous parler de plus en plus de Laravel, un framework PHP vraiment très pratique qui me sert maintenant dans la plupart de mes développements web. Une fois que l'on y goute cela devient difficile de s'en passer tellement il rend de nombreux services aux développeurs.

Passons directement aux choses sérieuses, et entrons dans le vif du sujet. Dans un premier temps il vous faudra une base de données avec des choses dedans car sinon l'autocomplétion ne va pas nous renvoyer grand-chose. Cela peut être une table avec une liste de prénoms, de pays ou encore mieux, vos data déjà en production sur lesquelles vous souhaitez faire une recherche.

Une fois ce pré-requis validé, passons maintenant à la vue de blade de Laravel dans laquelle nous allons mettre notre formulaire de recherche. Dans un premier temps, il va falloir appeler les librairies dont nous avons besoin. Je préfère  en général les avoir les avoir local sur le serveur mais pour ce tutoriel nous allons utiliser les CDN pour ne pas compliquer les choses, vous avez juste à copier coller les lignes suivantes dans votre blade pour appeler jQuery et jQuery UI (ainsi que son style) :

<!-- jQuery -->
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<!-- jQuery UI -->
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>

Ce style dans votre formulaire permet d'avoir une scroll bar dans les résultats de l'autocomplétion (très utile si les premiers résultats sont en nombre important) :

<style>
.ui-autocomplete {
  max-height: 100px;
  overflow-y: auto;
/* prevent horizontal scrollbar */
  overflow-x: hidden;
}
/* IE 6 doesn't support max-height
* we use height instead, but this forces the menu to always be this tall
*/
* html .ui-autocomplete {
  height: 100px;
}
</style>

Ensuite nous avons notre formulaire dans une vue blade de Laravel, vous pouvez aussi le faire en pur HTML sans utiliser la classe Form, cela ne change rien tant que vous ajoutez bien l'id pour jQuery qui est ici #auto :

{!! Form::open(array('url' => '/search')) !!}
Recherche :
{!! Form::text('auto', '', ['id' =>  'auto', 'placeholder' =>  'Enter name'])!!}
{!! Form::submit('Search', array('class' => 'button expand')) !!}
{!! Form::close() !!}

Ensuite notre petit morceau de JavaScript avec jQuery autocomplete :

<script type="text/javascript">
   $(function() {
     $("#auto").autocomplete({
        source: "/getdata",
        minLength: 1

      });
    });
</script>

Enfin, il nous faut une route qui renvoie les données pour notre autocomplete. Vous avez dû remarquer que sur le JavaScript précédent il y avait : source: "/getdata". C'est justement notre route Laravel qui va renvoyer les données (il faudra mettre ce code dans votre fichier de route, par exemple dans /routes/web.php) :

Route::get('getdata', function()
{
    $term = \Request::get('term');

    $d = \DB::table('YOUR_TABLE')
    ->select('id','YOUR_COLUMN')
    ->where('YOUR_COLUMN','LIKE','%'.$term.'%')
    ->get();
    $data = array(
    );

    foreach ($d as $key => $value) {
      $data[] = $value->domain;
    }

    $return_array = array();
    foreach ($data as $k => $v) {
        if (strpos(($v), $term) !== FALSE) {
            $return_array[] = array('value' => $v, 'id' =>$k);
        }
    }
    return \Response::json($return_array);
});

Il faudra bien modifier les YOUR_TABLE et YOUR_COLUMN en accord avec votre base de données pour que cela fonctionne pour vous. Voila, vous avez votre autocomplétion sous Laravel. Bien évidemment, il est possible d'améliorer les choses mais cet article a surtout pour but de donner un exemple basique de l'utilisation de jQuery autocomplete sous Laravel. Je précise que ce tutoriel a été réalisé avec Laravel en version 5.4, donc si vous avez une version antérieure, il faudra probablement adapter le contenu /getdata en conséquence.