Autocomplete

delaville81 -  
Bonjour chers confères,
J'ai trouvé ce code pour crée un input d'autocomplete sur ce site
https://github.com/cluemediator/autocomplete-textbox-ajax-php

J'ai fais sur mon serveur OVH comme indiqué (en mettant mes identifiants de connexion à la BDD), mais rien ne fonctionne

J'aurais bien besoin de votre aide

Meci d'avance

Configuration: Macintosh / Chrome 89.0.4389.90


--
Bien PHPment et MySQLment
Delaville

9 réponses

  1.  jordane45 Modérateur
    Bonjour,

    Va falloir être un peu plus précis
    Qu'as tu fais au juste ?
    As tu créé la table ?
    Quel code as tu réellement écrit ?
    As tu inclus la librairie jquery à ta page ?
    As tu des erreurs dans la cosnole Javascript de ton navigateur ?

    NB: vu que ça utiliser l'ajax, pour correctement le debuguer, je t'invite fortement à le faire depuis le navigateur Firefox et à cocher, dans la console, le debugage XHR.

    1. delaville81 Auteur
      index1.php 
      <!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Demo</title>
  <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.1/themes/base/minified/jquery-ui.min.css" type="text/css" /> 
</head>
<body> 

    <form action='' method='post'>
        <p><label>Country:</label><input type='text' name='country' value='' class='auto' autocomplete="off"></p>
    </form>

<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.10.1/jquery-ui.min.js"></script>    
<script type="text/javascript">
$(function(){
    
    //autocomplete
    $(".auto").autocomplete({
        source: "ajax-city-search.php",
        minLength: 1
    });                

});
</script>
</body>
</html>


      connection.php 
      <?php
	$dbhost = 'mon host';
	$dbuser = 'utilisateur';
	$dbpass = 'mon pws';
	$db = 'nom de la base';
	$conn = mysqli_connect($dbhost, $dbuser, $dbpass , $db) or die($conn);	
?>


      ajax-city-search.php 
      <?php
require_once('connection.php');

function get_city($conn , $term){	
	$query = "SELECT * FROM city WHERE city_name LIKE '%".$term."%' ORDER BY city_name ASC";
	$result = mysqli_query($conn, $query);	
	$data = mysqli_fetch_all($result,MYSQLI_ASSOC);
	return $data;	
}

if (isset($_GET['term'])) {
	$getCity = get_city($conn, $_GET['term']);
	$cityList = array();
	foreach($getCity as $city){
		$cityList[] = $city['city_name'];
	}
	echo json_encode($cityList);
}
?>


      La table est bien crée.

      La console javascript me renvoi

      Mixed Content: The page at 'https://url de mon site' was loaded over HTTPS, but requested an insecure stylesheet 'http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.1/themes/base/minified/jquery-ui.min.css'. This request has been blocked; the content must be served over HTTPS.
      index1.php:1 Mixed Content: The page at 'https://url de mon site' was loaded over HTTPS, but requested an insecure script 'http://code.jquery.com/jquery-1.9.1.min.js'. This request has been blocked; the content must be served over HTTPS.
      index1.php:1 Mixed Content: The page at 'https://url de mon site' was loaded over HTTPS, but requested an insecure script 'http://code.jquery.com/ui/1.10.1/jquery-ui.min.js'. This request has been blocked; the content must be served over HTTPS.
      index1.php:17 Uncaught ReferenceError: $ is not defined
      at index1.php:17

      1. jordane45 Modérateur
        Il faut que tu charges les librairie jQuery UI et JQuery en HTTPS et non en HTTP tout court.
        Carla, la console m'indique que jQuery n'est pas chargé
        1. delaville81 Auteur
          Meci pour ta réponse.
          J'ai toujours une erreur

          GET https://url du site/ajax-city-search.php?term=c 500

          1. jordane45 Modérateur
            Il faut metttre le chemin vers ton fichier php...
            Qu'as tu mis ?
        3. delaville81 Auteur 
          $(function(){
    
    //autocomplete
    $(".auto").autocomplete({
        source: "ajax-city-search.php",
        minLength: 1
    });                

});

          1. jordane45 Modérateur
            Par contre, une erreur 500 indique un souci au niveau de ton code php.

            Il faudrait activer l'affichage des erreurs php et gérer les erreurs mysqli
        4. delaville81 Auteur
          J'ai mis : 
          error_reporting(E_ALL);
ini_set('display_errors', TRUE);
ini_set('display_startup_errors', TRUE);


          aucun retour.
          La console JS n'affiche rien
          Mais ça ne marche toujours pas

          1. jordane45 Modérateur
            Et la gestion des erreurs mysqli ?
            Car si tu as une erreur 500.. le souci se trouve au niveau du script php
        5. delaville81 Auteur 
          <?php
$link = mysqli_connect("localhost", "my_user", "my_password", "world");
 
/* Vérification de la connexion */
if (mysqli_connect_errno()) {
	printf("Échec de la connexion : %s\n", mysqli_connect_error());
	exit();
}
 
if (!mysqli_query($link, "SET a=1")) {
	printf("Message d'erreur : %s\n", mysqli_error($link));
}
 
/* Fermeture de la connexion */
mysqli_close($link);
?>


          En changeant "localhost", "my_user", "my_password", "world" par les codes de BDD.
          Me retourne

          Message d'erreur : Unknown system variable 'a'
          1. jordane45 Modérateur
            Ben oui.. je ne pense pas que la requête que tu essayes d'exécuter soit celle que tu voulais au départ
        6. delaville81 Auteur
          Vu que rien ne fonctionne, connais tu un tuto clair sur l'autocomplete en JS .
          J'ai l'impression que le JSON ne fonctionne pas sur mon hébergeur (OVH). Aucune des fonctions JS/ AJAX / PHP que j'ai écrite n'a fonctionné.
          1. jordane45 Modérateur
            voici à quoi devrait ressembler ton code 
            <?php 
// fichier : connection.php
$dbhost = 'mon host';
$dbuser = 'utilisateur';
$dbpass = 'mon pws';
$db = 'nom de la base';
$conn = mysqli_connect($dbhost, $dbuser, $dbpass , $db);	
/* Vérification de la connexion */
if (mysqli_connect_errno()) {
  printf("Échec de la connexion : %s\n", mysqli_connect_error());
  exit();
}
 
 ?>
 


            <?php
// Fichier : ajax-city-search.php
//affichage des erreurs php
error_reporting(E_ALL);
ini_set('display_errors', TRUE);
ini_set('display_startup_errors', TRUE);

// connexion à la bdd
require_once('connection.php');

 
function get_city($term){	
  global $conn;
	$query = "SELECT * FROM city WHERE city_name LIKE '%".$term."%' ORDER BY city_name ASC";
  if (!mysqli_query($conn, $result = mysqli_query($conn, $query))) {
      echo json_encode([ mysqli_error($link)]);
  }
	$data = mysqli_fetch_all($result,MYSQLI_ASSOC);
	return $data;	
}

$cityList = array();
if (isset($_GET['term'])) {
	$getCity = get_city($_GET['term']);
	if(!empty($getCity)){
	foreach($getCity as $city){
		$cityList[] = $city['city_name'];
	}
  }else{
    echo json_encode(['AUCUNE DONNEE TROUVEE']);
  }  
}

echo json_encode($cityList);


            NB: Pour pouvoir debuguer de l'ajax, il faut que tu utilises FireFox et que tu actives, dans la console js, le debugage XHR.
        7. delaville81 Auteur
          J'ai changé le fichier index1.php avec la version trouvée sur le page Github de la fonction 
          <!doctype html>
<html lang="en">
<head>
<!-- jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
 
<!-- jQuery UI -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css" />
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
 
<!-- Bootstrap CSS -->
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
</head>

<body>
<div class="container">
  <h5 class="mt-4">Autocomplete Textbox Using PHP, MySQL and jQuery - <a href="https://www.cluemediator.com/" target="_blank">Clue Mediator</a></h5>
  <div class="row">
     <div class="col-md-4">
     <label>City:</label>
     <input type="text" name="city" id="search_city" placeholder="Type to search..." class="form-control">  
     </div>
  </div>
</div>
<script type="text/javascript">
  $(function(){
     $( "#search_city" ).autocomplete({
       source: 'ajax-city-search.php',
       minLenght: 1
     });
  });
</script>
</body>
</html>


          XHR GET https://URLDeMonSite.com/ajax-city-search.php?term=a
          [HTTP/2 200 OK 58ms]

          Mais aucune liste de choix ne s'affiche

          Discussions similaires

          CSS pour autocomplete
          emrh

          4 réponses