Discussion :

[bertrand_cave]

Bonjour,

Je fais face à un problème que je peine à résoudre tout seul, tant mes facultés en jquery sont faibles... Il faudra que je m'y mette sérieusement un jour, c'est promis!

J'utilise jquery-ui pour faire un autocomplete rangé par catégorie puisque mon champs de recherche peux sortir aussi bien le nom des produits que les marques.
Mon json (généré par PHP, les infos étant dans une BDD) transmet l'information sous la forme
{"label":"Produit 1","url":"produit.php?id=1","category":"Produits"}

Mais je souhaiterais que le clic sur une proposition mène directement à cette page (et ne remplisse pas simplement l'input comme le veut le comportement par défaut)

Je vous copie colle mon script jquery qui est celui fourni par jquery-ui dans sa démo ici

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
 
<script>
$.widget( "custom.catcomplete", $.ui.autocomplete, {
	_renderMenu: function( ul, items ) {
		var self = this,
		currentCategory = "";
		$.each( items, function( index, item ) {
			if ( item.category != currentCategory ) {
			ul.append( "<li class='ui-autocomplete-category'>" + item.category + "</li>" );
			currentCategory = item.category;
			}
		self._renderItem( ul, item );
		});
	}
});
 
$(function() {
	$( "#search" ).catcomplete({
	source: 'search.php',
	});
});
</script>

Comment faire donc pour que les résultats de cet autocomplete mènent vers l'adresse contenue dans le champ "url" des données json?

Un grand merci par avance si vous pouvez m’aiguiller, j'imagine que ça ne doit pas être bien compliqué mais enfin suffisamment pour que je ne puisse pas me débrouiller seul...

[Bovino]

Ben, il suffit de lire un minimum la doc et d'utiliser l'événement select

[bertrand_cave]

En effet, j'ai finalement réussi à trouver ce qui clochait, et c'est bien le select...
Je met le bout de code à modifier pour ceux qui passeraient par là, on sait jamais, peut-être que d'autres sont aussi mauvais que moi en jQuery

Code :

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

1
2
3
4
5
6
7
8
 
$(function() {
	$( "#searchbox" ).catcomplete({
	source: 'search.php',
        select: function( event, ui ) {
            window.location = ui.item.url;}
	});
});