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


--
Bien PHPment et MySQLment
Delaville

9 réponses

  1.
    jordane45 Messages postés 30426 Date d'inscription   Statut Modérateur Dernière intervention   4 830
     
    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
  2. 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
  3. jordane45 Messages postés 30426 Date d'inscription   Statut Modérateur Dernière intervention   4 830
     
    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
  4. 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
    1. jordane45 Messages postés 30426 Date d'inscription   Statut Modérateur Dernière intervention   4 830
       
      Il faut metttre le chemin vers ton fichier php...
      Qu'as tu mis ?
      0

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

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

});

    0
    1. jordane45 Messages postés 30426 Date d'inscription   Statut Modérateur Dernière intervention   4 830
       
      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
  7. 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
    1. jordane45 Messages postés 30426 Date d'inscription   Statut Modérateur Dernière intervention   4 830
       
      Et la gestion des erreurs mysqli ?
      Car si tu as une erreur 500.. le souci se trouve au niveau du script php
      0
  8. 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
    1. jordane45 Messages postés 30426 Date d'inscription   Statut Modérateur Dernière intervention   4 830
       
      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
  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
    1. jordane45 Messages postés 30426 Date d'inscription   Statut Modérateur Dernière intervention   4 830
       
      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
  10. 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

Discussions similaires

CSS pour autocomplete
emrh -
emrh -

4 réponses