Discussion :

[Jean-Michel 25]

Bonjour

J'ai réussi après bien des recherches à mettre en place une recherche assistée, avec Jquery-ui et ajax et il reste un point que je n'arrive pas régler seul.

Où j'en suis : Un php-ajax me renvoie une liste-box enrichie en HTML (pour sous_signer le texte saisi) du genre :

-- Fruits --
Pommes
Poires
-- Légumes --
Poivrons

Je voudrais tout simplement que les titres séparateurs ne soient pas cliquables...

Voici le code utilisé côté Jquery :

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
	function highlightText(text, $node) {
		var searchText = $.trim(text).toLowerCase(), currentNode = $node.get(0).firstChild, matchIndex, newTextNode, newSpanNode;
		while ((matchIndex = currentNode.data.toLowerCase().indexOf(searchText)) >= 0) {
			newTextNode = currentNode.splitText(matchIndex);
			currentNode = newTextNode.splitText(searchText.length);
			newSpanNode = document.createElement("span");
			newSpanNode.className = "autocomplete";
			currentNode.parentNode.insertBefore(newSpanNode, currentNode);
			newSpanNode.appendChild(newTextNode);
		}
	}
	$("#autocomplete").autocomplete({
		source: "ajax_autocomplete.php",
		focus: function(event, ui) {
			// prevent autocomplete from updating the textbox
			event.preventDefault();
		},
		select: function(event, ui) {
			// manually update the textbox and hidden field
			$("#fs").val(ui.item.id);
		}
	}).data("ui-autocomplete")._renderItem = function(ul, item) {
		var $a = $("<a></a>").text(item.value);
		highlightText(this.term, $a);
		return $("<li></li>").append($a).appendTo(ul);
	};	
	// Merci http://salman-w.blogspot.fr/2013/12/jquery-ui-autocomplete-examples.html
	// Merci https://github.com/salmanarshad2000/demos/blob/v1.0.0/jquery-ui-autocomplete/highlight-matched-text.html
	// Merci http://cdn.rawgit.com/salmanarshad2000/demos/v1.0.0/jquery-ui-autocomplete/using-label-value-pairs.html

Je triture mes derniers cheveux.
Quelqu'un pourrait me donner une piste ?

Un grand merci par avance !
JM

[mathieu]

il y a un exemple de présentation par groupes ici :
http://jqueryui.com/autocomplete/#categories

[Jean-Michel 25]

Merci pour ça !

J'ai tenté de comprendre ces différentes utilisations de Jquery-UI.
Il y a plein de façons de traiter les infos reçues en Ajax.

Finalement en partant du script de base, que j'ai donné plus haut, et qui fonctionne, j'ai réussi à ajouter cette fonction de groupage.
Pour info, la voici :

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
	var currentCategory = "";
	$("#autocomplete").autocomplete({
		source: "ajax_autocomplete.php",
		focus: function(event, ui) {
			// prevent autocomplete from updating the textbox
			event.preventDefault();
		},
		select: function(event, ui) {
			// manually update the textbox and hidden field
			$("#fs").val(ui.item.id);
		}
	}).data("ui-autocomplete")._renderItem = function(ul, item) {
        if (item.category != currentCategory) {
          ul.append("<li class='stabilo'>" + item.category + "</li>");			
          currentCategory = item.category;
        }		
 
		var $a = $("<a></a>").text(item.value);
		highlightText(this.term, $a);
		return $("<li></li>").append($a).appendTo(ul);
	};

C'est tout bête mais quand on est pas pro de Jquery, c'était difficile à inventer.
Donc finalement, avant tout initialisation de var currentCategory à blanc,
puis ajout de ces trois lignes juste avant le traitement normal des lignes d'item :

Code :

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

1
2
3
4
if (item.category != currentCategory) {
          ul.append("<li class='stabilo'>" + item.category + "</li>");			
          currentCategory = item.category;
}

Et ça roule !

A bientôt pour la suite...