Besoin D'aide Avec L'autocomplete

International French
1

Bonjour tout le monde,

Bon voila moi a la base je suis ingénieur réseaux, le web master de ma boite démissionne donc le bosse me demande de reprendre la main. Le hic, c’est que je n’ai aucune notion de web programming. Donc ça serai sympa si quelqu’un ici pouvait me refiler un petit coup de main.

Sachant que le site existe déjà et est parfaitement fonctionnel, il me demande d’apporter qq modifs.

Pour commencer il me demande d’implémenter l’autocomplete dans un champ de recherche

voici le code pour faire cette recherche (il y a encore d’autres paramètres de recherches, mais ceux la sont sous forme de dropdownliste il n’y a que dans ce champs ou ou il y a du texte en entrée)




        echo CHtml::beginForm(CHtml::normalizeUrl(array('haves/create')), 'get', array('id'=>'filter-form'))

            . '<div class="row" style="width:100%;">'

            . CHtml::encode('Project Name ')

            . CHtml::textField('TitleName', (isset($_GET['TitleName'])) ? $_GET['TitleName'] : '', array(

                'id'=>'TitleName',

                'style' => 'width:100%;'

                ))

            . '</div>'

Que doit je faire pour que l’utilisateur ai une liste de propositions quand il entre sa recherche (a la google)

Svp prenez en considération dans vos réponses que je part du niveau zero’ donc svp essayez d’etre les plus claire possibles.

Merci a vous.

2

Salut !

Alors basiquement, tu vas devoir utiliser un widget nommé CJuiAutoComplete, qui est basé sur le plugin Autocomplete de jQuery UI. Pour l’avoir déjà utilisé, je sais qu’on peut l’employer de 2 manières différentes :

  • toutes les données de l’autocomplétion sont envoyées au client lors du chargement de la page, le plugin fonctionne alors de manière autonome lors de la saisie de l’utilisateur ;

  • une requête AJAX est envoyée lors de la saisie de l’utilisateur afin de récupérer seulement les données correspondant à sa saisie.

En général le choix est déterminé suivant le volume de données à transférer. Un exemple : pour un champ d’autocomplétion de noms de départements, tu vas plutôt utiliser la première solution car charger une centaine de départements au chargement de la page n’est pas très volumineux, et ça évite ainsi d’utiliser une requête l’AJAX. Par contre si tu devais autocompléter un nom de groupe musical parmi une base de données d’une centaine de milliers d’enregistrements… 2ème solution :)

Donc la question : quelle solution te semble la plus adaptée à ton problème ?

3

Salut,

merci pour ces éclaircissements.

Basiquement la requête de recherche va s’effectuer sur des brochures de propriétés(les autres critères sont quartier, budget, surface, nbr de chambre etc) et la bdd en contient un certain nombre (plus de 3000 je crois).

Donc il me semble que la deuxième solution est la plus adéquate à mes besoins.

Pouvez vous svp m’aiguiller comment procéder(étape par étape si c’est possible je suis un totale débutant).

Merci à vous.

4

Alors oui effectivement, s’il y a plusieurs milliers d’enregistrements, c’est le second choix qui semble le plus recommandé. Il va donc falloir procéder en 2 parties.

Dans le code qui suit, j’ai considéré que le code que tu as posté est une vue placée dans “/protected/views/haves/create.php” gérée par un contrôleur HavesController situé dans “/protected/controllers/HavesController.php”. Le modèle correspondant est “Haves” dans “/protected/models/Haves.php”. Le champ de base de données qui va servir à l’autocomplétion est “title_name”.

Côté vue, il va falloir remplacer le textField par un CJuiAutoComplete.




$this->widget('zii.widgets.jui.CJuiAutoComplete', array(

    'name' => 'TitleName',

    'options' => array(

        'minLength' => '3',

    ),

    'source' => $this->createUrl("haves/suggestTitleName"),

    'htmlOptions' => array(

        'id' => 'TitleName',

        'style' => 'width:100%;',

    ),

));

Ce code va créer un input équivalent à celui créé par textField mais permettant l’autocomplétion. Si 3 caractères sont saisis, le composant va appeler l’action “suggestTitleName” de ton contrôleur HavesController. Le but de ce dernier sera de retourner les “TitleName” correspondants à la saisie.

Pour cela, tu va devoir ajouter dans le contrôleur la méthode suivante :




public function actionSuggestTitleName()

{

    $request = trim($_GET['term']);

    if ($request != '') {

        $model = Haves::model()->findAll(array("condition" => "title_name LIKE '%$request%'"));

        $data = array();

        foreach ($model as $haves) {

            $data[] = $haves->title_name;

        }


        echo json_encode($data);

    }

}

Cette portion de code recherche tous les enregistrements en base de données qui ont le champ "title_name" (à toi de remplacer les mentions "title_name" par le bon nom) qui contient la saisie, et les envoie au composant CJuiAutoComplete du client. Les % sont des jokers SQL permettant de remplacer de 0 à n caractères.

Voila. C’est un exemple basique de ce que tu souhaites faire. Il va sûrement falloir adapter tout ça pour faire quelque chose qui fonctionne, et je me doute que ça va pas être évident si tu n’es pas développeur. Donc si tu as la moindre question, n’hésite pas.

5

Merci infinement pour ton aide vraiment précieuse je vais bidouiller ça et reviendrai vers toi pour te tenir au courant de l’évolution de la situation.

Donc je n’ai qu’à intégré tout ça a mon code en y apportan

6

En y apportant les moddifs nécessaires c’est ça ?

7

A priori oui. Je me suis basé sur une utilisation standard de Yii et sur le code que tu as posté. Mais bon, il peut y avoir un tas de choses pour lesquelles mon code ne fonctionnerait pas, donc ça a peu de chances de fonctionner du premier coup mais on va bien y arriver :)

PS : Je viens de rejeter un oeil sur ton code. Pour la partie que je t’ai filée pour la vue, ça doit donner ça :




echo CHtml::beginForm(CHtml::normalizeUrl(array('haves/create')), 'get', array('id'=>'filter-form'))

            . '<div class="row" style="width:100%;">'

            . CHtml::encode('Project Name ')

            . $this->widget('zii.widgets.jui.CJuiAutoComplete', array(

                'name' => 'TitleName',

                'options' => array(

                    'minLength' => '3',

                ),

                'source' => $this->createUrl("haves/suggestTitleName"),

                'htmlOptions' => array(

                    'id' => 'TitleName',

                    'style' => 'width:100%;',

                ),

            ))

            . '</div>'
8

merci infiniment pour ton aide précieuse

mais je but sur cette erreur j’ai beau essayer de bidouiller je n’arrive pas à trouver une solution.

As tu une idée sur la source du blocage ?

9

Ah oui, au temps pour moi !

J’ai effectivement été un peu vite. En fait, ton code devient ça :




    echo CHtml::beginForm(CHtml::normalizeUrl(array('haves/create')), 'get', array('id'=>'filter-form'))

            . '<div class="row" style="width:100%;">'

            . CHtml::encode('Project Name ');


    $this->widget('zii.widgets.jui.CJuiAutoComplete', array(

        'name' => 'TitleName',

        'options' => array(

            'minLength' => '3',

        ),

        'source' => $this->createUrl("haves/suggestTitleName"),

        'htmlOptions' => array(

            'id' => 'TitleName',

            'style' => 'width:100%;',

        ),

    ));


    echo '</div>';

Ca devrait régler ce problème.

10

ça y est presque :lol:

la pages est toute décalée et déformée