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

passion · 3 Avril 2014

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:

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?

passion · 3 Avril 2014

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>

spout · 3 Avril 2014

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: