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

[thecrazyspy]

La version 1.11.1

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

[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 ?

[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/

[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 ?

[kakashi99]

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 :

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

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.