Autocomplete

Signaler
Messages postés
133
Date d'inscription
jeudi 6 novembre 2008
Statut
Membre
Dernière intervention
1 avril 2021
 -
Messages postés
133
Date d'inscription
jeudi 6 novembre 2008
Statut
Membre
Dernière intervention
1 avril 2021
 -
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

9 réponses

Réponse 1 / 9
Messages postés
32042
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
8 avril 2021
 3 380
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.


Réponse 2 / 9
Messages postés
133
Date d'inscription
jeudi 6 novembre 2008
Statut
Membre
Dernière intervention
1 avril 2021
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

Réponse 3 / 9
Messages postés
32042
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
8 avril 2021
 3 380
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é
Réponse 4 / 9
Messages postés
133
Date d'inscription
jeudi 6 novembre 2008
Statut
Membre
Dernière intervention
1 avril 2021
Meci pour ta réponse.
J'ai toujours une erreur

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

Signaler
Messages postés
32042
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
8 avril 2021
 3 380
Il faut metttre le chemin vers ton fichier php...
Qu'as tu mis ?
Réponse 5 / 9
Messages postés
133
Date d'inscription
jeudi 6 novembre 2008
Statut
Membre
Dernière intervention
1 avril 2021
 
$(function(){
    
    //autocomplete
    $(".auto").autocomplete({
        source: "ajax-city-search.php",
        minLength: 1
    });                

});

Signaler
Messages postés
32042
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
8 avril 2021
 3 380
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
Réponse 6 / 9
Messages postés
133
Date d'inscription
jeudi 6 novembre 2008
Statut
Membre
Dernière intervention
1 avril 2021
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

Bien PHPment et MySQLment
Delaville
Signaler
Messages postés
32042
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
8 avril 2021
 3 380
Et la gestion des erreurs mysqli ?
Car si tu as une erreur 500.. le souci se trouve au niveau du script php
Réponse 7 / 9
Messages postés
133
Date d'inscription
jeudi 6 novembre 2008
Statut
Membre
Dernière intervention
1 avril 2021
 
<?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'
Signaler
Messages postés
32042
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
8 avril 2021
 3 380
Ben oui.. je ne pense pas que la requête que tu essayes d'exécuter soit celle que tu voulais au départ
Réponse 8 / 9
Messages postés
133
Date d'inscription
jeudi 6 novembre 2008
Statut
Membre
Dernière intervention
1 avril 2021
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é.
Signaler
Messages postés
32042
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
8 avril 2021
 3 380
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.
Réponse 9 / 9
Messages postés
133
Date d'inscription
jeudi 6 novembre 2008
Statut
Membre
Dernière intervention
1 avril 2021
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
Répondre Posez votre question