Discussion :

[thecrazyspy]

Bonjour,

Je suis à la recherche d'une méthode pour complété automatiquement deux champs inputs, j'y arrive sur un mais pour l'autre.

Pour faire simple je cherche un article avec l'autocompletion et je voudrais qu'il me remplisse aussi la case référence.

Voici mon code pour le coté html :

Code :

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

1
2
3
4
5
6
7
$(document).ready(function() {
	$('#article0').autocomplete({
		serviceUrl: 'articlesearch.php',
		dataType: 'json'
	});
 
});

Code html :

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

1
2
<td><input type="text" id="ref0" name="ref0" placeholder="REF" value="" style="border:none;"/></td>
<td><input type="text" id="article0" name="article0" placeholder="ARTICLE" value="" size="100%" style="border:none;"/>

Pour le php :

Code php :

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
<?php
    if(isset($_GET['query'])) {
        // Mot tapé par l'utilisateur
        $q = htmlentities($_GET['query']);
        // Requête SQL
        $sql_article = mysql_query("SELECT libelle_article, ref_article FROM article WHERE libelle_article LIKE '%".$q."%' LIMIT 0, 10") OR die ("erreur search article".$sql_article);
 
        // On parcourt les résultats de la requête SQL
        while($resultat = mysql_fetch_object($sql_article)) {
            // On ajoute les données dans un tableau
            $suggestions['suggestions'][0] = $resultat->libelle_article;
			//$suggestions['suggestions'][1] = $resultat->ref_article;
        }
 
        // On renvoie le données au format JSON pour le plugin
        echo json_encode($suggestions);
    }
?>

Quelqu'un peut il m'aider ?

merci

[kakashi99]

Salut,

je pense qu'un truc du genre devrait fonctionner :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
$('#article0').autocomplete({
    source: [
        { value: "article1", refVal: "ref"},
        { value: "article2", refVal: "ref2"},
        { value: "article3", refVal: "ref3"},
        { value: "article4", refVal: "ref4"}
    ],
    select: function( event, ui ) {
        $('#ref0').val(ui.item.refVal)
    }
});

"source" ici sera à remplacer par ton appel php...

[thecrazyspy]

Effectivement avec la source ci-dessous ça fonctionne mais pas avec mon fichier php, une idée ?

Code :

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

1
2
3
4
5
6
7
 
source: [
        { value: "article1", refVal: "ref"},
        { value: "article2", refVal: "ref2"},
        { value: "article3", refVal: "ref3"},
        { value: "article4", refVal: "ref4"}
    ]

J'ai fais des modifs :

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
 
$q = htmlentities($_GET['query']);		
$query=mysql_query("SELECT libelle_article, ref_article FROM article WHERE libelle_article LIKE '%".$q."%' LIMIT 0, 10"); 
if ( ! $query )
	die ('mysql_query error SELECT tiers' . mysql_error());
 
$json=array(); 
$return_json=array();
 
while($row=mysql_fetch_array($query))
{         
 
	$row = array_map('utf8_encode', $row);
 
	$critere = $row['ref_article'].' '.$row['libelle_article'].' '.$row['prix_article'];
	$json['value'] = $row['libelle_article'];
	$json['refVal'] = $row['ref_article'];
 
    array_push($return_json,$json);
 
}  
 
 
echo json_encode($return_json); 
flush();
exit;

Pourtant si j'execute seulement le php j'obitens :

Code :

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

[{"value":"ARTICLE TEST","refVal":"ABCD"},{"value":"ASTRA","refVal":"ZYX"}]

[thecrazyspy]

J'ai trouvé c'était $_GET["term"]; et non $_GET["query"];

par contre avant j'avais en CSS ça :

Code css :

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

1
2
3
4
.autocomplete-suggestions { border: 1px solid #999; background: #FFF; overflow: auto; }
.autocomplete-suggestion { padding: 2px 5px; white-space: nowrap; overflow: hidden; }
.autocomplete-selected { background: #F0F0F0; }
.autocomplete-suggestions strong { font-weight: normal; color: #3399FF; }

comment puis-je l'adapter au nouveau code ?

merci

[kakashi99]

heu... ça change quoi au css ? qu'est ce qui n'est plus comme avant ? théoriquement rien ne change...


[edit] j'avais vu ton message précédent...
c'est quelle version de jqueryui que tu utilises ?
dans la doc api je ne trouve aucune trace de "serviceUrl"...

[thecrazyspy]

le css ne fonctionne plus car maintenant c'est du ui-menu et je n'arrive pas a obtenir le meme résultat, avant des qu'une lettre que tu taper été dans le résultat elle s'afficher en bleu au fur et à mesure, c'etait sympa

[kakashi99]

heu donc en fait je repose ma question finalement ^^

c'est quelle version de jqueryui que tu utilises ?
dans la doc api je ne trouve aucune trace de "serviceUrl"...

ou alors tu utilises une autre librairie qui s'appelle aussi jquery.autocomplete...