Autocomplete

Pierrot · 05-05-2012 12:53:14

Si çà peu intéresser quelque'un, Voila l'utilisation du plugin autocomplete de jquery UI:

Pour info, c'est une fonction générique qui fonctionne avec toutes bases de données et toutes tables.

le fichier php

    // header("Content-Type: text/plain; charset=UTF-8");

    $host="127.0.0.1";

    $database="prostandv2";

    $user="root";

    $password="";

    try {

       $connexion = new PDO('mysql:host='.$host.';dbname='.$database, $user, $password);

       // Toute erreur PDO envoie une exception (ce qui n'est pas, a tort,

       // le mode par defaut)

       $connexion->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);

       $connexion->query("SET NAMES utf8;");

       $connexion->query("SET lc_time_names = 'fr_FR';");

       $connexion->setAttribute(PDO::MYSQL_ATTR_USE_BUFFERED_QUERY,true);

       $connexion->exec('SET NAMES utf8');

       $msgerr = '';

    } catch (Exception $exc) {

       $msgerr = $exc;

    }

    $table = $_GET['table'];

    $searchfield = $_GET['searchfield'];

    $fields= $_GET['fields'];

    $fields =  str_replace(',',",', '," ,$fields );

    $sql = "SELECT id,CONCAT($fields) as value FROM $table WHERE $searchfield like '%{$_GET['term']}%'";

    $res = $connexion->query($sql);

    while($row = $res->fetch(PDO::FETCH_ASSOC)){

        $responce[]=$row;

    }

    echo json_encode($responce);

le fichier html pour tester.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "[url]http://www.w3.org/TR/html4/loose.dtd[/url]">

<html style="width:100%;height:100%;overflow: scroll">

    <head>

        <script type="text/javascript" src="/js/jquery-1.7.1.min.js"></script>

        <script type="text/javascript" src="/js/jquery-ui.min.js"></script>

        <link rel="stylesheet" type="text/css" href="/css/jquery-ui.css">

        <script>

            function majautoComplete(){

              var table = $('#table').val();

              var fieldsearch = $('#fieldsearch').val();

              var fieldsview = $('#fieldsview').val();

              $("#art").autocomplete({

                    source: "search_autocomplete.php?table="+table+"&fields="+fieldsview+"&searchfield="+fieldsearch,

                    minLength: 3, // recherche a partir de 3 caracteres

                    select: function( event, ui ) {

                        $("#id").val(ui.item.id);

                    }

                });  

            };

            $(document).ready(function(){

                majautoComplete();

            });

        </script>

    </head>

    <body>

        <label>Table</label> <input type="text" id="table" value="dossiers" size ="50"/></br>

        <label>Champ de recherche </label> <input type="text" id="fieldsearch" value ="raison_sociale" size ="50"/></br>

        <label>Champs à afficher(séparés par des virgules si plusieurs)</label> <input type="text" id="fieldsview" value ="raison_sociale" size ="50"/></br>

        <input type="button" id="but" value="maj" onClick="majautoComplete()"/></br>

        <label>Mettre à jour les paramètres de la fonction</label> </br>

        <label>Recherhe</label><input type="text" id="art" size ="100"/></br>

        <label>id selectionné</label> <input type="text" id="id" size ="30"/>

    </body>

</html>

Voila, vous remplissez le formulaire(comme à la sécu ), vous cliquez sur [Mettre à jour les paramètres de la fonction] et vous rechercher dans votre table.

Bonne méditation.
a++

PHP|Débutant :: Forums

Advertisement

#1 05-05-2012 12:53:14

Autocomplete

Pied de page des forums