Afficher un lien et remplir l'auto-complétion

Version imprimable

Bonjour,
je souhaite afficher du html et remplir en dessous des champs pour l'auto-complétion.

j'ai fais un petit test:

je n'ai pas mis le bout de code mais lorsque que je tape 3 lettres,
j'ai une light box qui apparaît et je souhaite afficher mes réponses dessus.

le fichier qui appelle une recherche de mot clé :
Code:

1 2 3 4 5 6 7 $.ajax({ url:'ajax_motcle.php', dataType:'json', success:function(data){ console.debug(data); } });
ajax_motcle.php
Code:

1 2 3 $auto_compl = array("php","java","sql");//résultat d'une liste de mot clé par mysql echo "resultat sous forme de tableau,récupération de donnée mysql, ce sont des liens a cliqué"; echo $json_encode($auto_comp);//tableau à récupérer pour l'auto complétion
pour ce simple, comment je dois faire pour voir le résultat en cas de succès avec firebug?
Est t'il possible d'afficher un résultat et de transmettre une tableau json pour le champs auto complété ?

merci d'avance pour la réponse.

j'ai fais ceci

Code:

1
2
3
4
5
6
7
8
9
10
11
12
$.ajax({
    type :'POST',
    url : '/ajax_motcle.php',
    data: "test=ping ajax !",
    dataType:"json",
    success: function(retour,status){
        alert(retour);
    },
    error : function(status){
        alert(status.responseText);
    },
});

Code:

1
2
3
4
5
<?php
$json = array("php","java","mysql");
echo "<h1>je suis du HTML</h1>";
echo json_encode($json);
?>

comment je fait pour juste récupérer $json sur la page qui appelle ajax_motcle ?

02/07/2014, 15h48
Bovino

Dans ton script PHP, tu fais un

Code:

echo "<h1>je suis du HTML</h1>";

donc ton retour n'est pas un format JSON correct et tu ne peux pas récupérer du JSON dans la réponse AJAX.
03/07/2014, 07h54
keokaz
merci de ta réponse :)
donc je ne peux pas mélanger du html et du json ...
donc je dois procéder ainsi ?
Code:

1 2 3 4 5 6 7 <?php header('Content-type: application/json'); $html="je suis du html"; $json = array("php","java","mysql",$html); echo json_encode($json); ?>
pour avoir la liste des auto complétion,je dois me débrouillé à supprimer "$html" avec le javascript ?

Ensuite, tu peux mettre tout ce que tu veux dans ton JSON, mais il est préférable de l'organiser de façon logique, par exemple :
Code:

1 2 3 4 5 6 7 <?php header('Content-type: application/json'); $html="<h1>je suis du HTML</h1>"; $json = array("liste" => array("php","java","mysql"), "html" => $html); $json = array("php","java","mysql",$html); echo json_encode($json); ?>
Ici, la clé "html" contient du HTML (même si techniquement, ce n'est rien d'autre qu'une chaine) que tu peux retrouver facilement côté client :
Code:

1 2 3 4 success: function(retour,status){ console.log(retour.liste); console.log(retour.html); }

merci ça fonctionne j'ai maintenant les 2

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
$.ajax({
    type :'POST',
    url : '/ajax_motcle.php',
    data: "test=ping ajax !",
    dataType:"json",
    success: function(retour,status){
        var autocomplete = retour.autoMotcle;
        var resultatHtml = retour.html;
        //alert(autocomplete);
        $("#find_cours").autocomplete({
            source : autocomplete,
        });
        $("#resultat_box").html("resultatHtml");
    },
    error : function(status){
        alert(status.responseText);
    },
});

j'ai le html et j'ai la liste des auto complétions,

voici mon code entier

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
$("#find_filtre").on("change", function() {//changement du filtre
    if ($('#find_cours').val().length > 2){
        recherche();
    }
});
$("#find_cours").on("keyup", function() {//saisie de 3 lettre dans le champ recherche
    if ($('#find_cours').val().length > 2){
        recherche();
    }
});
//permet de fermer la fenêtre de recherche modal
$("#modal_off").on("click", function() {
    $("#modal_recherche").css('display', 'none');
})
function recherche() {
    var motcle = $("#find_cours").val(); //recupération du mot cle
    var filtre = $('#find_filtre').val(); //filtre all par default
    $("#wait").css('display','block'); //faire apparaître le loading
    $("#modal_recherche").css('display','block');
    $("#find_cours").css('color','#046380');
    $.ajax({
        type :'POST',
        url : '/ajax_motcle.php',
        data: "test=ping ajax !",
        dataType:"json",
        success: function(retour,status){
            var autocomplete = retour.autoMotcle;
            var resultatHtml = retour.html;
            //alert(autocomplete);
            $("#find_cours").autocomplete({
                source : autocomplete,
            });
            $("#resultat_box").html("resultatHtml");
        },
        error : function(status){
            alert(status.responseText);
        },
    });

je souhaite demander une autre recherche si on sélectionne un autre mot de liste autocomplétion,
est t'il bon d'ajouter un autre évenement ?

Code:

1
2
3
$("#find_cours").on(selectionner un autre mot de la liste, function() {//saisie de 3 lettre dans le champ recherche
    recherche();
});