Récupérer une valeur sur JSON avec JQUERY auto-completion

Discussion dans 'Développement d'un site Web ou d'une appli mobile' créé par passion, 3 Avril 2014.

  1. passion
    passion WRInaute accro
    Inscrit:
    6 Janvier 2006
    Messages:
    3 924
    J'aime reçus:
    191
    Bonjour,
    Pour expliquer en 2 mots...
    Je développe un moteur de recherche pour mon site sur lequel après avoir sélectionné un pays de domiciliation, le champ "code postal" (input text) est utilisé pour renseigner le code postal et un menu déroulant s'affichera pour sélectionner une ville en fonction du code postal initialement renseigné.
    J'utilise donc le framework JQUERY et UI auto-completion en m'appuyant sur JSON.
    Le principe...
    L'internaute renseigne à partir de 3 caractères le code postal pour que se lance l'auto-completion.

    ça fonctionne très bien:
    [​IMG]

    Mais en faite, logiquement une ville peut avoir plusieurs codes postaux donc pour éviter les erreurs de géolocalisation, je stocke dans un champ "MSCodePostal" en (text hidden) la valeur du code postal récupérer de mon fichier JSON sélectionné.
    En théorie mais pas en pratique :(
    C'est là que ça coince!
    J'arrive pas à récupérer la valeur sélectionnée issue de mon "data".
    Je vous mets mes scripts JS et PHP, pour la création de ma structure JSON.

    Voici mon script JS:
    Code:
    <script>
                        $( "#MSCPostal" ).autocomplete({
                            minLength: 3,
                            source: function( request, response ) {
                                var term = request.term;
                                var pid = $('#MSPays').val();
                                $.getJSON( "<?php echo HTTP_INTERFACE; ?>search.php?do=city&pid="+pid, request, function( data, status, xhr ) {
                                    response(data);
                                    var info = data[0]['id'];
                                    $('#MSCodePostal').val(info);
                                });
                            }
                        });
                    </script>
    Mon script PHP, créant la structure JSON:
    Code:
    public function getAutoCompletion($term,$genre){
            $req = new CompBDD(); $metier = new Metier(); $array = array();
            if($genre == 1){
                $m = $req->executerSQL("SELECT `ville`,`code_postal` FROM `".T_MEMBRE."` WHERE `code_postal` LIKE '".$term."%' AND `pays`=".minuscule($_GET['pid'])." AND `statut`=2 GROUP BY `ville`");
                while($s = mysql_fetch_object($m)){
                    $entry = "(".substr($s->code_postal,0,2).") ".$s->ville."";
                    array_push($array, array("id"=>$s->code_postal,"label"=>$entry,"value"=>$s->ville));
                }
            }
            else{
                //....
            }
            return (count($array) > 0)?$array:array(array("id"=>1,"label"=>TXT_75,"value"=>""));
        }
    Donc mon JSON est sous la forme d'une itération de la sorte:
    array => array {"id","label","value"}
    Donc pour passer d'une ville à une autre array[0], array[1], array[2], etc...
    C'est là que je n'arrive pas à coller dans mon "info", la valeur sélectionnée issue de mon JSON:
    Code:
    $('#MSCodePostal').val(info);
    Pouvez-vous m'aider?
     
  2. passion
    passion WRInaute accro
    Inscrit:
    6 Janvier 2006
    Messages:
    3 924
    J'aime reçus:
    191
    Bon... le truc vraiment couillon?! :lol:
    J'ai cherché pendant 2 heures et l'idée m'est venue aussi rapidement pffff!
    Donc si un modo veut supprimer ou le garder pour servir à d'autres :)
    La solution était d'ajouter simplement ceci dans mon JS (select):
    Code:
    <script>
                        $( "#MSCPostal" ).autocomplete({
                            minLength: 3,
                            select:function(event, ui){
                                $('#MSCodePostal').val(ui.item.id);
                            },
                            source: function( request, response ) {
                                var term = request.term;
                                var pid = $('#MSPays').val();
                                $.getJSON( "<?php echo HTTP_INTERFACE; ?>search.php?do=city&pid="+pid, request, function( data, status, xhr ) {
                                    response(data);
                                });
                            }
                        });
                    </script>
     
  3. spout
    spout WRInaute accro
    Inscrit:
    14 Mai 2003
    Messages:
    9 205
    J'aime reçus:
    365
    Regarde sur mon www j'ai fait ceci:
    Code:
    $("#search-query").autocomplete({
    	source: "/fr/search/autocomplete/",
    	minLength: 2,
    	select: function(event, ui) {
    		window.location.replace(ui.item.url);
    	}
    }).data("ui-autocomplete")._renderItem = function(ul, item) {
    	return $("<li>")
    	.append('<a><img src="/static/flags/' + item.country.toLowerCase() + '.gif">&nbsp;' + item.label + ' <span class="ui-autocomplete-verbose-name">[' + item.verbose_name + ']</span></a>')
    	.appendTo(ul);
    };
    
    Dans ton cas ça reviendrait à faire:
    Code:
    select: function(event, ui) {
    	$('#MSCodePostal').val(ui.item.id);
    }
    
    Edit: grillé :lol:
     
Chargement...
Similar Threads - Récupérer valeur JSON Forum Date
Récupérer les 10 plus grandes valeurs dans un fichier JSON Développement d'un site Web ou d'une appli mobile 18 Novembre 2021
[résolu] Récupérer des valeurs issues de javascript pour les mettre en base MySQL Développement d'un site Web ou d'une appli mobile 18 Juillet 2016
JavaScript - Récupérer valeurs input Développement d'un site Web ou d'une appli mobile 6 Février 2015
[RESOLU] recuperer valeur d'un champ en js Développement d'un site Web ou d'une appli mobile 17 Décembre 2014
Comment récupérer les valeurs UTM en PHP ? Google Analytics 9 Février 2013
Jquery recuperer la valeur d'un input Développement d'un site Web ou d'une appli mobile 9 Août 2011
Récupérer valeur après # dans une url Développement d'un site Web ou d'une appli mobile 29 Juin 2011
Récupérer la valeur d'un champs en auto incrément ? Développement d'un site Web ou d'une appli mobile 22 Avril 2011
Parser un flux XML en PHP pour récupérer une valeur Développement d'un site Web ou d'une appli mobile 10 Février 2011
PHP: Récupérer valeur array 2 dim d'un formulaire HTML Développement d'un site Web ou d'une appli mobile 16 Octobre 2009
PHP: récupérer valeur de deux $_POST avec foreach Développement d'un site Web ou d'une appli mobile 8 Octobre 2009
récuperer valeur php liste multiple Développement d'un site Web ou d'une appli mobile 30 Octobre 2008
Récupérer valeur champ en javascript Développement d'un site Web ou d'une appli mobile 23 Avril 2008
Récuperer la valeur du mot clé AdWords 11 Avril 2008
PHP récuperer la valeur d'une cellule d'un fichier Excel Développement d'un site Web ou d'une appli mobile 15 Novembre 2007
AJAX=Listes déroulantes créées/rechargées, récupérer valeurs Développement d'un site Web ou d'une appli mobile 29 Juillet 2007
Mysql - Récupérer des valeures de requetes récursives Développement d'un site Web ou d'une appli mobile 21 Mai 2007
PHP: récupérer la valeur d'une ancre Développement d'un site Web ou d'une appli mobile 30 Septembre 2006
comment récupèrer les valeurs des champs d'une table sql ? Développement d'un site Web ou d'une appli mobile 25 Avril 2006
Récupérer 2 valeurs par le biais d'une seule liste Développement d'un site Web ou d'une appli mobile 21 Janvier 2006