Fonctionnement autocomplétion

Version imprimable

Bonjour à tous,

J'ai trouvé un script d'autocompletion très simple mais cela ne fonctionne pas et je ne trouve pas pourquoi ? j'ai 2 fichiers, un formulaire et un fichier.php

Auriez vous une idée ?

Merci par avance.

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 
  <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
 
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.9.2.custom.js"></script>
 
 <script>
        $(document).ready(function() {
                $('#nom').autocomplete({
                        serviceUrl: 'fichier.php',
                        dataType: 'json'
                });
        });
 
</script>
</head>
 
<body>
 
 
<p>Entrez le nom : <input type="text" id="nom" /></p>
 
 
</body>
 
</html>

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<?php
 
 
 
	include "../connect.php";
 
    OpenConnection();
 
	$sql = "Select Nom FROM Personne";
 
    $result = mysql_query($sql);
 
	while ($row = mysql_fetch_row($result))
	{
 
		 $suggestions['suggestions'][]= $row[0] ;
 
 	}
 
	// print_r($suggestions);
 
 
 	echo json_encode($suggestions);

08/06/2016, 11h31
chadoum

Ce ne serait pas "source" le paramètre plutôt que "serviceUrl" ?
08/06/2016, 14h24
l.laurent60

J'ai testé et c'est pareil ???
08/06/2016, 14h36
l.laurent60

Pour complément d'information avec source j'ai un champ qui apparait en dessous mais je n'ai pas le retour du tableau ??

Vérifie la construction de ton tableau de $suggestions. Affiche-le dans la console.
L'autocomplete doit pourvoir récupérer un format json cohérent, de ce type :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
 
var projects = [
      {
        value: "jquery",
        label: "jQuery",
        desc: "the write less, do more, JavaScript library",
        icon: "jquery_32x32.png"
      },
      {
        value: "jquery-ui",
        label: "jQuery UI",
        desc: "the official user interface library for jQuery",
        icon: "jqueryui_32x32.png"
      },
      {
        value: "sizzlejs",
        label: "Sizzle JS",
        desc: "a pure-JavaScript CSS selector engine",
        icon: "sizzlejs_32x32.png"
      }
    ];

Ou plus simple :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
 
var availableTags = [
      "ActionScript",
      "AppleScript",
      "Asp",
      "BASIC",
      "C",
      "C++",
      "Clojure",
      "COBOL",
      "ColdFusion",
      "Erlang",
      "Fortran",
      "Groovy",
      "Haskell",
      "Java",
      "JavaScript",
      "Lisp",
      "Perl",
      "PHP",
      "Python",
      "Ruby",
      "Scala",
      "Scheme"
    ];

08/06/2016, 15h13
l.laurent60

Merci beaucoup pour ton retour on avance....

Voilà ce que je récupère quand je fait j'affiche le page fichier :

Code:

{"suggestions":["xxxxxxx","yyyyyyyyyyy","zzzzzzzzzzz","ttttttttttttt"]}

Donc effectivement j'ai trouvé une coquille, un tableau a plusieurs dimension donc j'ai modifié le fichier.php

Code:

$suggestions[]= $row[0] ;

Maintenant sous le champs input j'ai tous le fichier qui apparait donc on avance, mais je n'ai filtrage a chaque nouveau caractère tapé
08/06/2016, 15h36
chadoum

Ok le plus dur est fait ;)
"source" plutôt que "serviceUrl"
08/06/2016, 15h43
l.laurent60

Oui je confirme il faut mettre source
maintenant dans la requête sql je peux avoir plusieurs milliers de nom, donc comment les filtrer progressivement a chaque caractère tapé ??

Avec un appel ajax et un nombre de lettre minimum.

Code:

1
2
3
4
5
6
7
8
9
10
11
 
$("tonInput").autocomplete({
    source: function (request, response) {
        $.get("tonScript.php", {
            query: request.term
        }, function (data) {
            response(data);
        });
    },
    minLength: 2
});

Je pense qu'il y une coquille dans ton code car il ne propose plus rien

Code:

1
2
3
4
5
6
7
8
9
10
$("#nom").autocomplete({
    source: function (request, response) {
        $.get("fichier.php", {
            query: request.term
        }, function (data) {
            response(data);
        });
    },
    minLength: 3
});

08/06/2016, 16h24
chadoum

Avec ton code il faut rentrer minimum 3 caractères (minLength)

Avec mon code et le minLength: 3 effectivement il faut 3 caractère avant que cela s'affiche mais en aucun il tient compte de caractère taper :

si je tape : dur il devrait m'afficher tous les dura, dure.... hors il m'affiche également les ala, bat... et avec le code que tu proposes le champ ne s'affiche meme pas ???
Code:

1 2 3 4 5 6 7 8 9 10 11 12 $("#nom").autocomplete({ source: function (request, response) { $.get("fichier.php", { query: request.term }, function (data) { response(data); }); }, minLength: 2 });