Autocomplete

delaville81 Messages postés 209 Statut Membre -  
delaville81 Messages postés 209 Statut Membre -
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
jordane45 Messages postés 40050 Statut Modérateur 4 757
 
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.


0
Réponse 2 / 9
delaville81 Messages postés 209 Statut Membre
 
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

0
Réponse 3 / 9
jordane45 Messages postés 40050 Statut Modérateur 4 757
 
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é
0
Réponse 4 / 9
delaville81 Messages postés 209 Statut Membre
 
Meci pour ta réponse.
J'ai toujours une erreur

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

0
jordane45 Messages postés 40050 Statut Modérateur 4 757
 
Il faut metttre le chemin vers ton fichier php...
Qu'as tu mis ?
0

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
Réponse 5 / 9
delaville81 Messages postés 209 Statut Membre
  
$(function(){
    
    //autocomplete
    $(".auto").autocomplete({
        source: "ajax-city-search.php",
        minLength: 1
    });                

});

0
jordane45 Messages postés 40050 Statut Modérateur 4 757
 
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
0
Réponse 6 / 9
delaville81 Messages postés 209 Statut Membre
 
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

0
jordane45 Messages postés 40050 Statut Modérateur 4 757
 
Et la gestion des erreurs mysqli ?
Car si tu as une erreur 500.. le souci se trouve au niveau du script php
0
Réponse 7 / 9
delaville81 Messages postés 209 Statut Membre
  
<?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'
0
jordane45 Messages postés 40050 Statut Modérateur 4 757
 
Ben oui.. je ne pense pas que la requête que tu essayes d'exécuter soit celle que tu voulais au départ
0
Réponse 8 / 9
delaville81 Messages postés 209 Statut Membre
 
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é.
0
jordane45 Messages postés 40050 Statut Modérateur 4 757
 
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.
0
Réponse 9 / 9
delaville81 Messages postés 209 Statut Membre
 
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
0