Autocompletion sur 2 champs input

Version imprimable

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:

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

Code:

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:

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

Salut,

je pense qu'un truc du genre devrait fonctionner :

Code:

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...

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

Code:

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:

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:

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

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

par contre avant j'avais en CSS ça :

Code:

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

23/01/2015, 13h37
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"... :?
23/01/2015, 13h49
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
23/01/2015, 14h06
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...

La version 1.11.1

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
 
<script type="text/javascript">
$(document).ready(function() {	
	$('#article0').autocomplete({
    source: 'articlesearch.php',
	dataType: 'json',
    select: function( event, ui ) {
        $('#ref0').val(ui.item.refVal)
		$('#article0').val(ui.item.value)
		$('#prix0').val(ui.item.prix)
		$('#idart0').val(ui.item.id)
    }
});
 
});
</script>

Je n'utilise plus le serviceURL

23/01/2015, 14h37
kakashi99

je ne trouve aucune trace de ".autocomplete-suggestions" dans la doc officielle... et aucun exemple ne montre de "lettre en bleu"...

tu es sur que tu n'as pas rajouté un thème ou autre chose ?
23/01/2015, 14h51
thecrazyspy

J'avais repris le code de la :

http://chez-syl.fr/2011/12/autocompletion-jquery-mysql/

Demo ici http://dev.chez-syl.fr/autocomplete/
23/01/2015, 18h26
thecrazyspy

Quelqu'un a une idée, de comment je peux faire ça, des que lettre correspond à un mot de la suggestion elle change de couleur dans la liste de suggestion ?

hello,

c'est bien ce que je pensais, en fait tu as deux librairies en parallèles qui font la même chose mais pas de la même façon.
avant tu utilisais "devbridge/jQuery-Autocomplete" qui gère le bleue, les modifs que je t'ai fait apporté ont fait que tu utilisais l'autocomplete de jqueryui qui ne gère pas le bleu...

avec ça, ça doit de nouveau fonctionner...
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 $('#article0').autocomplete({ lookup: [ { value: "article1", refVal: "ref"}, { value: "article2", refVal: "ref2"}, { value: "article3", refVal: "ref3"}, { value: "article4", refVal: "ref4"} ], onSelect: function( item ) { console.log(item); $('#ref0').val(item.refVal) } });
par contre il faudrait que tu fasses attention entre jqueryui et "devbridge/jQuery-Autocomplete", histoire d'être sur d'utiliser le bon.