Recherche sur le clic avec la saisie semi-automatique de Jquery

J’essaie de simuler l’expérience de recherche automatique Youtube.

Je ne trouve pas l’option lorsque le spectateur clique sur un élément de la liste et qu’il est automatiquement procédé à la recherche dudit élément

Mon codage est le suivant:

 var data = ['array1','array2']; $(document).ready(function() { $j("input#directorySearch").autocomplete(data); });

Le code ci-dessus permettra à l’utilisateur de cliquer sur l’un des éléments énumérés, mais remplira le champ de recherche plutôt que de chercher automatiquement.

Je voulais un comportement similaire, en utilisant le widget autocomplete par défaut de jQueryui. L’astuce consiste à utiliser l’événement ‘select’, mais la soumission à partir de votre gestionnaire de sélection ne donnera pas les résultats souhaités, car la sélection ne sera pas encore complétée.

Le code suivant fonctionne pour moi cependant:

 $("input#searchbox").autocomplete({ source: autocomplete, select: function(event, ui) { $("input#searchbox").val(ui.item.value); $("#searchform").submit(); } })

(dans l’exemple ci-dessus, “autocomplete” est une URL qui pointe vers la source d’achèvement)

Où input # searchbox est l’entrée réelle et #searchform le formulaire parent. Fondamentalement, vous devez remplir le formulaire avant de vous soumettre.

Ne pouvez-vous pas faire quelque chose comme:

 $('.autocomplete ul li').live("click", function() { $("form#search").submit(); });

Où l’événement click de votre liste d’options déclenche l’envoi d’un formulaire pour votre formulaire de recherche ??

Au départ, j’ai utilisé quelque chose de simple comme Bassistance.de

Je suis passé à utiliser une autre bibliothèque de devBridge

devBridge a une option appelée “onSelect:” qui me permet de soumettre automatiquement le formulaire.

 $j("input#directorySearch").result(function(event, data, formatted) { $(this).closest("form").submit(); });

Documentation officielle: http://docs.jquery.com/Plugins/Autocomplete/result#handler

 $(function() { $( "#search" ).autocomplete( { source:'/search-terms.php', focus: function(event, ui) { $("input#search").val(ui.item.label); }, select: function(event, ui) { $("#searchform button").click(); } }) });

J’utilise ce bon travail 🙂