Je cherche à optimiser ma liste, j'ai mis en place l'autocomplétion et maintenant je voudrais définir des options de saisie. Notamment j'aimerai que l'utilisateur puisse écrire avec des accents ou tout en minuscule ou tout en majuscule et que le filtre de la liste avec l'autocompletion fonctionne. 

Voici mon code php qui remplie le tableau avec les données de ma BD :

 <?php

    // Connexion à la base de données
	try{
    //Tentative de connexion � la bdd
    $bdd = new PDO('pgsql:host=localhost; dbname=TEST','postgres','');
   	}
  	catch(Exception $e){
    // En cas d'erreur on affiche un message et on stop tout
    die('Erreur : '.$e->getMessage());
    }

    // Variable qui va retenir les caractères tapés dans la liste et filtrer dans la BD
    $term = $_GET['term'];
    // Requete
    $requete = $bdd -> prepare('SELECT "SCOT_2016", St_astext("geom") as "geom_ok" from "GEOMETRIES"."SCOT_GEOFLA_2016" WHERE "SCOT_2016" LIKE :term');
    // Exécuter la requette dans un tableau
    $requete  -> execute(array('term' => '%'.$term.'%'));
    // Tableau vide
    $array = array();

    // Boucle pour remplir le tableau
    while ($donnee = $requete->fetch())
    {
        array_push($array, $donnee['SCOT_2016']);
    }

    // Transformer les données du tableau en JSON pour pouvoir les lire en JS
    echo json_encode($array);

?>

Le Js : 

        
        $(document).ready(function() {
            /* city autocomplete */
            $('#scot').autocomplete({
                minLength:2, /* nombre de caractères minimaux pour lancer une recherche */
                delay:200, /* delais après la dernière touche appuyée avant de lancer une recherche */
                scrollHeight:320,
                appendTo:'#scot-container', 
                source : 'php/listScot.php',
            });
        });
  
        

et le HTML : 

	<div class="form-group">
            <label for="scot"> Territoires : </label>
            <span id ="scot-container">
			    <input type="text"  name="scot" id="scot" class="ui-autocomplete ui-widget-content ui-corner-all" placeholder="Nom SCOT">
            </span>
            <span id="loading" style="display:none;"><i class="fa fa-circle-o-notch fa-spin"></i></span>
			<input type="hidden" name="city-hidden">
        </div>
        

Salut,

autocomplete ne permet pas ça par défaut. il faut le modifier un peu.

google "jquery autocomplete accent insensitive" premier lien, première réponse du topic.

Merci pour cet exemple. Je suis entrain de l'adapter en remplaçant le tableau dans la variable  "keywordz" pour mon tableau en php (qui est transformé en Json) "php/listScot.php". Et je n'ai plus la liste de mes pays mais les lettre de "php/listScot.php".. Je ne comprends pas qu'est ce qui bloque la lecture de mon php. 

Mon code à nouveau :

$(function(){

        var scot = 'php/listScot.php';

        var accentMap = {
            "à": "a", "â": "a", "é": "e", "è": "e", "ê": "e", "ë": "e",
            "ï": "i", "î": "i", "ô": "o", "ö": "o", "û": "u", "ù": "u"
        };

        var normalize = function( term ) {
            var ret = "";
            for ( var i = 0; i < term.length; i++ ) {
                ret += accentMap[ term.charAt(i) ] || term.charAt(i);
            }
            return ret;
        };


            /* city autocomplete */
        $(document).ready(function() { 
            $('#scot').autocomplete({
                source: function( request, response ) {
                    var matcher = new RegExp( $.ui.autocomplete.escapeRegex( request.term ), "i" );
                    response( $.grep(scot, function( value ) {
                        value = value.label || value.value || value;
                        return matcher.test( value ) || matcher.test( normalize( value ) );
                    }));
                } 
            });
        });
        });

-
Edité par JustaCode 17 novembre 2017 à 17:28:00

ouvre la console d'erreur (F12 ou Ctrl+Maj+I)

vérifie d'abord qu'il y ai pas d'erreur, et ensuite va dans l'onglet réseau pour surveiller ta requete et les données reçues

Pas d'erreur dans la console... Dans réseau il ne charge rien lorsque je suis dans mon input.

Ce que je ne comprends pas, dans la version précédente (premier code), la lecture vers mon fichier php fonctionnait... 

J'ai pas examiné en détail le code proposé, mais tu mets une chaîne de caractère (scot) là où l'auteur du code mets un array avec la liste des entrées possibles.

Je ne vois pas très bien ce que tu veux dire.. je lui défini en php que c'est un array. Comment est ce que je peux lui dire de récupérer l'array dans ma var scot ? Parce qu'il ne comprend pas qu'il doit récupérer les éléments dans le php.

Soit tu fais une requête ajax, soit tu initialise ta variable JS avec ton script PHP :

<script>
var scot = <?php echo json_encode($un_array_php) ?>;
</script>

Dans le cas que tu met ici, je ne vais pas chercher le tableau déjà créer dans mon fichier php ...

mon fichier listScot.php 

 <?php

    // Connexion à la base de données
	try{
    //Tentative de connexion � la bdd
    $bdd = new PDO('pgsql:host=localhost; dbname=TEST','postgres','');
   	}
  	catch(Exception $e){
    // En cas d'erreur on affiche un message et on stop tout
    die('Erreur : '.$e->getMessage());
    }

    // Variable qui va retenir les caractères tapés dans la liste et filtrer dans la BD
    $term = $_GET['term'];
    // Requete
    $requete = $bdd -> prepare('SELECT "SCOT_2016", St_astext("geom") as "geom_ok" from "GEOMETRIES"."SCOT_GEOFLA_2016" WHERE "SCOT_2016" LIKE :term');
    // Exécuter la requete dans un tableau
    $requete  -> execute(array('term' => '%'.$term.'%'));
    // Tableau vide
    $array = array();

    // Boucle pour remplir le tableau
    while ($donnee = $requete->fetch())
    {
        array_push($array, $donnee['SCOT_2016']);
    }

    // Transformer les données du tableau en JSON pour pouvoir les lire en JS
    echo json_encode($array);

?>

Je cherche juste un moyen d'obtenir ce tableau en JS en appelant mon fichier php..

Script JS pour l'autocomplétion :

 <!-- Scipt JS qui permet l'autocomplétion de la liste -->
       <script>
        
    $(function(){

        var scot = '<?php echo json_encode($array)?>';

        var accentMap = {
            "à": "a", "â": "a", "é": "e", "è": "e", "ê": "e", "ë": "e",
            "ï": "i", "î": "i", "ô": "o", "ö": "o", "û": "u", "ù": "u"
        };

        var normalize = function( term ) {
            var ret = "";
            for ( var i = 0; i < term.length; i++ ) {
                ret += accentMap[ term.charAt(i) ] || term.charAt(i);
            }
            return ret;
        };

            /* city autocomplete */
     
        $('#scot').autocomplete({
             /* nombre de caractères minimaux pour lancer une recherche */
            delay:200, /* delais après la dernière touche appuyée avant de lancer une recherche */
            scrollHeight:320,
            appendTo:'#scot-container', 
            source: function( request, response ) {
                var matcher = new RegExp( $.ui.autocomplete.escapeRegex( request.term ), "i" );
                    response( $.grep(scot, function( value ) {
                        value = value.label || value.value || value;
                        return matcher.test( value ) || matcher.test( normalize( value ) );
                    }));
            } 
        });
      
    });
       
        </script>

-
Edité par JustaCode 21 novembre 2017 à 17:41:01

Quand tu écris :

  source: 'php/listScot.php'

Le plugin comprends lui meme qu'il doit faire une requete ajax. Par contre, si tu mets une fonction, tu dois faire toi meme la requete ajax.

Je me rends compte que je t'ai induit en erreur, car si tu fais une requetes ajax, c'est plus simple d'ignonrer les accents dans ta requete SQL et de pas toucher à ton script JS de départ.

Je ne maitrise pas encore tout ça, est ce que tu pourrais détailler un petit peu plus sur comment faire une requête ajax ?

Comme j'ai dit, tu fait déjà une requete ajax, ou plutot autocomplete() la fait pour toi quand tu écrire " source: 'php/listScot.php' "

Du coup, au lieu d'essayer de customiser le plugin autocomplete, je pense qu'il est plus simple de s'occuper d'ignorer les accents dans ton fichier php.