UI Autocomplete : gérer l'absence de résultats

Version imprimable

Bonjour,

J'utilise UI Autocomplete avec ce code fonctionnel :

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
27
28
29
30
31
32
 
<script type="text/javascript">
 
$(function() {
 
            $( "#state" ).autocomplete({
                source: "dev2_search_autocomplete.php",
                minLength: 2,
 
 
				select: function (event, ui) {
					$('#state_id').val(ui.item.id);
 
 
                }
            });
 
 
        });
 
//gestion highlighting		
$.ui.autocomplete.prototype._renderItem = function (ul, item) {
            item.label = item.label.replace(new RegExp("(?![^&;]+;)(?!<[^<>]*)(" + $.ui.autocomplete.escapeRegex(this.term) + ")(?![^<>]*>)(?![^&;]+;)", "gi"), "<span style='color:red;'>$1</span>");
            return $("<li></li>")
                    .data("item.autocomplete", item)
                    .append("<a>" + item.label + "</a>")
                    .appendTo(ul);
        };
 
 
 
</script>

Je souhaiterais savoir s'il est possible d'ajouter une fonctionnalité pour gérer le cas où la recherche ne donne aucun résultat. Par ex. si je tape dans l'input "wz", je souhaiterais qu'un message du style "no match found" s'affiche dans l'input ou dans la liste des propositions (ce message ne devant pas être considéré comme une véritable proposition=>ne doit pas être envoyé dans la variable POST après la soumission du formulaire). Est-ce réalisable avec jquery ? Merci.

Bonsoir

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
/*
 * Le seul truc fiable que j'ai trouvé.
 * Mais l'événement change n'est déclenché
 * que lorsque l'input perd le focus.
 */
$( "#tags" ).autocomplete({
	source: availableTags,
	change: function (event, ui) {
		if (!ui.item){
			$(this).val('');
 
			alert("No Match !");
		}
	}
});

12/09/2011, 23h23
almoha
Merci de cette proposition de code. Mais le fait que l'événement change ne se déclenche que lorsque l'input perd le focus me gêne. J'ai essayé d'envisager le problème sous un autre angle : en passant par la modification du code source php, j'ai fait en sorte que si le résultat de la recherche renvoie moins de 1 résultat, le tableau renvoyé est égal à "No Results Found" :
Code:

1 2 3 4 5 $numrows=mysql_num_rows($fetch); if($numrows < 1) {$return_arr []="No Results Found";} echo json_encode($return_arr);
Avec cette modification, si je tape un mot absent de la base, le texte "No Results Found" s'affiche bien dans la liste des propositions. Le problème est que cette proposition (qui n'en est pas une au sens strict) est cliquable et sélectionnable. En la sélectionnant, la "proposition" est rapatriée dans l'input. Or si je soumets le formulaire, ma recherche Php recherchera le texte "No Results Found", ce qui n'a pas de sens. Existe-t-il un moyen de rendre la "proposition" No Results Found non sélectionnable de façon à rendre impossible son "rapatriement" dans le champ input ? Qu'en pensez-vous ? Merci.
13/09/2011, 04h12
danielhagnoul

Ajouter un élément à la liste des propositions et puis exiger de UI Autocomplete qu'il n'en tienne pas compte ? Je ne vois pas.

D'accord, je m'en doutais un peu ;) . Reste éventuellement une dernière possibilité. Mon formulaire rattaché à l'autocomplete est le suivant :
Code:

1 2 3 4 5 6 7 8 9 <form action ="" method="POST" id="autoc"> <div class="ui-widget"> <label for="state">state </label> <input type="text" id="state" name="state" /> <input type="hidden" id="state_id" name="state_id" /> <input type="submit" name="submitBtn" value="ok" /> </div> </form>
Au lieu d'avoir à cliquer sur le bouton submit pour soumettre mon formulaire, existe-t-il un moyen pour soumettre le formulaire automatiquement après avoir cliqué sur une proposition ?
Si oui, comment ? De plus, est-il possible de prévoir une exception : soumission automatique sauf si la proposition cliquée est égale à "No Results Found" ? Merci.

Bonjour,

En complétant mon code, je suis parvenu à soumettre automatiquement mon formulaire autocomplete après un clic sur une proposition :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
 
$(function() {
 
            $( "#clesearch" ).autocomplete({
                source: "scripts/autoc/dev2_search_autocomplete.php",
                minLength: 2,
 
 
				select: function (event, ui) {
					$('#clesearch_id').val(ui.item.id);
                                        $('#clesearch').val(ui.item.value);
					$("#cherche").submit();
 
                }
            });
 
 
        });

Comme je souhaite empêcher cette soumission automatique lorsque la value de l'input est égale à "No Results Found", j'ai tenté de conditionner la soumission de la façon suivante :

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
27
28
29
30
31
32
33
34
 
$(function() {
 
            $( "#clesearch" ).autocomplete({
                source: "scripts/autoc/dev2_search_autocomplete.php",
                minLength: 2,
 
 
				select: function (event, ui) {
					$('#clesearch_id').val(ui.item.id);
                    $('#clesearch').val(ui.item.value);
					$('#cherche').submit(
   function(){
                   var ret = true;
  $('.oblig').each(function() {
  if($(this).val() == "No Results Found") ret = false        
  })
         return ret;}
);
 
 
                }
            });
 
 
        });
 
<form action ="" method="POST" id="cherche">
   <div class="ui-widget">
   <label for="state">state </label>
   <input type="text" class="oblig"  name="state" id="state"/> 
   <input type="hidden" id="state_id" name="state_id" /> 
   </div>
</form>

Ce code ne génère pas d'erreur mais du coup la soumission automatique ne se fait plus quelle que soit la value du champ input ayant la classe "oblig".
Voyez-vous comment parvenir au résultat escompté ? Merci.