Coucou à tous,

Je post un petit message pour vous demander un peu d'aide car j'ai un système de recherche avancée (une croix sur laquelle je clique pour dérouler la recherche avancée) avec quoi je dois mettre :

<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script> <?php //globals

Mais ce code ne permet pas à mon système de recherche en autocomplete de fonctionner. Pour qu'il fonctionne je dois mettre ce code à la place :

<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>

Et quand je le mets c'est mon système de recherche avancé avec la croix qui ne fonctionne plus. Je n'ai aucun message d'erreur dans ma console, que dois-je faire docteur ? hihi

Merciiii les amis

Salut,

Mets nous l'intégralité de ton code HTML et tes fonctions JS que tu utilises pour appeler l'autocomplete

                <input type="search" id="recherche" name="recherche">
				<script>
					  $(function() {
						
						$('#recherche').autocomplete({
						  source : function(request, response)
								  {
									  $.ajax({
										  url: "liste.php",
      				                      minLength : 3,
										  type: "GET",
										  dataType: "json",
										  data: {term: $("#recherche").val()},
										  success: function(data) { response(data); }
										  });
								  }
					  });
					  });
                </script>



                    <div id="recherche_avancee">
                        <script>
                            $(document).ready(function() {
                            $('#recherche_avancee span').click(function(){
                                $('#recherche_avancee p').toggle(function(){
                                    $('#recherche_avancee span p').slideUp();
                                }, function(){
                                $('#recherche_avancee span p').slideDown();
                                });
                            });
                        });
                        </script>
                    <span>+ Recherche avancée</span>
                    <p>
                    <label>Hobbies </label>
                        <input type="checkbox" name="shopping" id="shopping" value="shopping"> Shopping
                        <input type="checkbox" name="sport" id="sport" value="sport"> Sport
                    <label>Fréquence </label> 
                        <input type="checkbox" name="week_end" id="week_end" value="week_end"> Le week-end
                        <input type="checkbox" name="semaine" id="semaine" value="semaine"> La semaine
                        <input type="checkbox" name="7_7" id="7_7" value="7_7"> 7/7j
                    </p>

Ton script PHP retourne quoi? C'est une requête SQL ? Tu peux nous le mettre aussi stp?

Et du coup, ta réponse PHP, tu dois retourner une variable du genre $result

Est ce que tu peux faire un var_dump($result) sur une requête factice (en ne mettant pas de variable mais des données en dur) et nous poster le résultat aussi stp ?

Oui c'est une requête sql.

Quand c'est mon autocomplete qui marche pas, je vais dans ma console puis réseau et je vois bien la requête se faire et comme réponse j'ai des suggestions. Donc il n'y a que l'affichage qui cloche

Certes. Mais le problème peut être multiple. C'est pour ça que j'aurais besoin d'un var_dump() pour pouvoir savoir comment est formaté ta response PHP et comprendre pourquoi elle n'est pas traitée par le JS

Oui pardon je étourdie hihi

object(PDOStatement)#2 (1) { ["queryString"]=> string(55) "SELECT * FROM table WHERE nom LIKE :term" } 
Warning: Cannot modify header information - headers already sent by (output started at /Users/Louise/Desktop/entre_filles/liste.php:8) in /Users/Louise/Desktop/entre_filles/liste.php on line 15

Tu ne me comprends pas bien. En gros, tu fais ta requête et tu la stockes dans une variable. Il faut que je sache ce que cette variable te retourne.

var_dump($variable);

Quand je me connecte sur la page liste.php j'ai tous les résultats déjà, c'est ça que tu veux ?

Ouais

["Christelle C.","Malcolm M.","Vincent P."]

J'ai abrégé et changé les infos bien sur

Justement, évite d'abréger.. Si je n'ai pas l'intégralité du code c'est un peu difficile de comprendre où ca plante..

Lorsque je me connecte à la page c'est ce que je vois (avec quelques nom de plus c'est tout).

Lorsque je tape la recherche en tapant la lettre "l" par exemple, j'ai comme retour :

["Christelle C.","Malcolm M."]

Essaye de faire u truc comme ca:

var liste = function () {
    var tmp = null;
    $.ajax({
        'async': false,
        'type': "POST",
        'global': false,
        'url': "liste.php",
        'data': { term : $('#recherche').val() },
        'success': function (data) {
            liste = data;
        }
    });
    return liste;
}();

console.log(liste);
//Logiquement ça doit te retourner ta liste de noms

$('#recherche').autocomplete({
          source : liste
      });

Même résultat pour l'instant. je ne pense pas que ça vienne du code en lui même vu qu'avec un autre jQuery ça fonctionne parfaitement. C'est peut-être qu'il faut trouver une version de jQuery qui soit compatible avec les deux ?

Il te met quoi le console.log ?

Parce que j'ai fait un petit test vite fait, la bibliothèque fonctionne:

https://jsfiddle.net/mubho14v/

Je pense que le problème vient du format de réponse de ton script PHP

-
Edité par bryan33000 15 juillet 2016 à 14:54:28

L'utilisation d'XMLHttpRequest de façon synchrone sur le fil d'exécution principal est obsolète à cause de son impact négatif sur la navigation de l'utilisateur final. Consulter http://xhr.spec.whatwg.org/ pour plus d'informations.

jquery.min.js:16:73229

retire la ligne 'async: false' et remets moi le console.log(), c'est pas normal déjà si il te retourne pas ton résultat...

Je viens de le faire, voici ce qu'il m'affiche : "undefined"

remplace 

var tmp = null;

par

var liste = null;

Petite erreur de ma part.. Je ne sais pas si ca va fonctionner, mais en tous cas, cela veut dire que ta variable liste n'esxiste pas pour jQuery. Du coup dans le autocomplete derrière il ne sait pas a partir de que se baser pour la source des tags

Même en remplaçant j'ai encore ce problème... snif j'en vois pas le bout

Ta variable n'est pas définie, c'est le seul problème. Du coup, soit tu as un problème dans ton php, soit le champ input n'est pas bien pris en compte

Tu peux me mettre ton script php en intégralité ?

Le code est ci-dessus, tu veux dire celui de mon fichier de récupération ?

Ouais, ton script PHP qui est censé renvoyer les données

Le voilaaaa initialement j'ai ça :

<?php 
$term = $_GET['term'];

$requete = $pdo->prepare('SELECT * FROM table_de_nom WHERE title LIKE :term');
$requete->execute(array('term' => '%'.$term.'%'));
$array = array();

while($donnee = $requete->fetch())
{
	array_push($array, $donnee['title']);
}
header('Content-Type: application/json');
echo json_encode($array);
?>

Essaye de faire ça:

PHP:

echo json_encode(array(
     'data' => $array
));

jQuery:

var liste = function () {
    var tmp = null;
    $.ajax({
        'async': false,
        'type': "POST",
        'global': false,
        'url': "liste.php",
        'data': { term : $('#recherche').val() },
        'success': function (data) {
            liste = data.data;
        }
    });
    return liste;
}();

console.log(liste);

Et dis moi ce que te retourne le console log

Pour le coup j'ai un retour dans ma console mais aucun affichage. Ou alors il ne faudrait pas trouver un fichier jQuery compatible avec les deux plutôt ? Puisque j'ai un retour avec l'un des fichiers mais pas avec l'autre

Mets moi ton console log...

Alors voici le résultat :

JQMIGRATE: Migrate is installed, version 1.4.1 jquery-migrate.min.js:2:542

L'utilisation d'XMLHttpRequest de façon synchrone sur le fil d'exécution principal est obsolète à cause de son impact négatif sur la navigation de l'utilisateur final. Consulter http://xhr.spec.whatwg.org/ pour plus d'informations. jquery-1.12.4.js:10208:0

Array [ "M.Malcolm", "A.Jerry", "C.Marine"] page-recherches:441:1

* Est-ce que ça confirme ce que je disais d'après toi ?

-
Edité par LouiseCaste 20 juillet 2016 à 14:46:54

alors,

Remplace 

async: false

par 

async: true

ensuite, logiquement tu récupères bien ta liste côté js.

Après, ta liste pour l'instant est vide car elle tape dedans sans variable.

Du coup, il faut que tu remettes ton autocomplete comme au début en faisant les modifs nécessaires. Ca devrait ressembler à ca:

$('#recherche').autocomplete({
          source : function(request, response)
                  {
                      $.ajax({
                          url: "liste.php",
                          minLength : 3,
                          type: "POST",
                          dataType: "json",
                          data: {term: $("#recherche").val()},
                          success: function(data) { response(data); }
                          });
                  }
      });
      });