Jquery ui autocomplete source php

**fazpedro** · 23/01/2012, 15h08

Bonjour,

j'ai lu beaucoup de choses sur le plugin autocomplete (que j'ai réussi à faire fonctionner avec des variables fixes...), mais je n'arrive pas à créer correctement un fichier PHP source pour récupérer mes données de façon dynamique...

le script dans le "head" :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
<script>
$(document).ready(function() {
$(function() 	{
					$( "#tags" ).autocomplete({	source: "recherche.php", minLength: 2 });
				});
		});
</script>

recherche.php :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
<?php 
require('configuration.php');
$sql = connect_sql();
$q = $_GET['q'];
$sql2 = mysql_query("SELECT nom FROM evenement WHERE nom LIKE '$q%' ";
while($tmp = mysql_fetch_assoc($sql2))
        {
                $res[] = array  (       'nom' => $tmp['nom']    );
        }
echo json_encode($res);
?>

il ne se passe rien quand je tape dans l'input "tags" :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
<div class="ui-widget">
	<span onmouseover="_tipon(this)" onmouseout="_tipoff()">
	<span class="google-src-text" style="direction: ltr; text-align: left">
	<label for="tags">Nom :</label>
	</span>
	</span>
	<input id="tags" tabindex="1" name="recherche" />
	</div>

dans le résultat de "recherche.php", voici ce que j'ai :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

[{"nom":"Premier"},{"nom":"Deuxieme"},{"nom":"troisieme"},....]

Merci d'avance !

**flotho** · 30/01/2012, 12h40

Bonjour,

essayez :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

$("input#tags")

Chez moi cela a donné du mieux

**fazpedro** · 30/01/2012, 15h39

en fait, il recherche mais ne me propose rien...
je ne vois pas où ça coince ?
Merci.

html :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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
31
32
33
34
<?php require('configuration.php');$sql = connect_sql();?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />	
<meta name="robots" content="noindex, nofollow" />
<title><?php echo $nom_site ?></title>
<link rel="Stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/themes/base/jquery-ui.css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.5.1.min.js"></script>
<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery.ui/1.8.10/jquery-ui.js"></script>
<script>
$(document).ready(function() {
$(function() 	{
					$("input#tags").autocomplete({	source: "recherche.php", minLength: 2 });
					// $("#tags").autocomplete({	source: "recherche.php", minLength: 2 });
				});
		});
</script>
</head>
<body>
<div id="mainContent">
<br />
<p>recherche essai autocomplete </p>
<div class="ui-widget">
<span onmouseover="_tipon(this)" onmouseout="_tipoff()">
<span class="google-src-text" style="direction: ltr; text-align: left">
<label for="tags">Nom :</label>
</span>
</span>
<input id="tags" tabindex="1" name="recherche" />
</div>
</body>
</html>

recherche.php :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
<?php 
require('configuration.php');
$sql = connect_sql();
$q = $_GET['q'];
$sql2 = mysql_query("SELECT nom FROM evenement WHERE nom LIKE '$q%' ");
while($tmp = mysql_fetch_assoc($sql2))
        {
                $res[] = array  (       'nom' => $tmp['nom']    );
        }
echo json_encode($res);
?>

**flotho** · 30/01/2012, 15h50

Ok,

Je commence à comprendre. Je vais te proposer quelquechose sous couvert des experts de ce forum.

Tu cherches à accéder à une page "recherche.php" qui contient un code dynamique!

Donc l'auto complète ne te renverra rien. A ta place je travaillerai avec de l'ajax.
La source officielle : http://jqueryui.com/demos/autocomplete/#xml
propose que la source de donnée soit déja alimentée ce qui ne sera pas le cas pour toi.

Il faut donc intégrer l'appel à la source de données comme fonction dans le paramètre source de ton autocomplete. En me basant sur :http://stackoverflow.com/questions/4...ote-xml-source j'ai obtenu le code suivant qui est fonctionnel chez moi :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
$( "input#quoi" ).autocomplete({
            source: function(request, response){
                $.ajax({
                    url: "tonurl.php", 
                    dataType: "xml",
                    data: {input:request["term"]},
                    success: function( xmlResponse ) {                         
                        response( 
                        $( "rs", xmlResponse ).map(function() {
                            return {
                                value:  __highlight($( "libellenormalized", this ).text(), request.term) ,                                
                                desc:   $( "info", this ).text() ,
                                id: $( "id", this ).text()
                            };
                        }))
                    },
                    error: function() {
                        alert("XML File could not be found");
                    }
                });              
            });

En gras un point pour lequel j'ai pas mal galéré.

Une ressource à laquelle tu arriveras bien au final pour faire du highlight : http://forum.jquery.com/topic/autoco...bold-highlight

Bon courage

**fazpedro** · 30/01/2012, 22h15

Aucun résultat... j'ai beau regarder sur le net, je ne trouve pas la solution pour récupérer les données dans l'input...

html :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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
31
32
33
34
35
36
37
38
39
40
41
42
43
44
<?php require('configuration.php'); 
$sql = connect_sql();?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />	
<meta name="robots" content="noindex, nofollow" />
<title><?php echo $nom_site ?></title>
<link rel="Stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/themes/base/jquery-ui.css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.5.1.min.js"></script>
<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery.ui/1.8.10/jquery-ui.js"></script>
<script>
	$(document).ready(function() {
		$( "input#tags" ).autocomplete({
			source: function(request, response) {      
				$.ajax({
					url: "recherche.php",
					dataType: 'json',
					data: { q: request.term },
					success: function(data) {
						response($.map(data, function(item) {
						return {label: __highlight(item.title, request.term) + " (" + item.type + ")",                    
						value: item.title};          }));        }      }); 
						   },
						 minLength: 2)  
						});
</script>
 
</head>
<body>
<div id="mainContent">
<br />
<p>recherche essai autocomplete </p>
<div class="ui-widget">
<span onmouseover="_tipon(this)" onmouseout="_tipoff()">
<span class="google-src-text" style="direction: ltr; text-align: left">
<label for="tags">Nom :</label>
</span>
</span>
<input id="tags" tabindex="1" name="recherche" />
</div>
</body>
</html>

recherche.php :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
<?php 
require('configuration.php');
$sql = connect_sql();
$q = $_GET['q'];
$sql2 = mysql_query("SELECT nom FROM evenement WHERE nom LIKE '$q%' ");
while($tmp = mysql_fetch_assoc($sql2))
        {
                $res[] = array  (       'nom' => $tmp['nom']    );
        }
echo json_encode($res);
?>