Recherche sur Cliquez avec la saisie semi-automatique de Jquery

Question

J'essaie de simuler l'expérience de recherche de saisie semi-automatique sur YouTube.

Je ne trouve pas l'option lorsque l'utilisateur clique sur un élément de la liste et procède automatiquement à la recherche de cet élément.

Mon codage est la suivante:

<script type="text/javascript"> 
    var data = ['array1','array2']; 
    $(document).ready(function() { 
    $j("input#directorySearch").autocomplete(data); 
    }); 
</script> 

Le code ci-dessus permet à l'utilisateur de cliquer sur des éléments de cette liste, cependant, il remplira la zone de recherche plutôt que la recherche automatiquement.

Answer 1

Je voulais un comportement similaire, en utilisant le widget de saisie semi-automatique par défaut de jQueryui. L'astuce consiste à utiliser l'événement 'select', mais l'envoi de votre select-handler ne donnera pas les résultats souhaités, car l'entrée n'aura pas encore été remplie.

Le code suivant fonctionne pour moi:

$("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ù entrée # searchbox est l'entrée d'entrée réel, et #searchform est sa forme d'origine. Fondamentalement, vous devez remplir l'entrée avant de vous soumettre.

Answer 2

Tu ne peux pas faire quelque chose comme:

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

Lorsque l'événement cliquez sur votre liste d'options déclenche un formulaire pour votre formulaire soumettre de recherche ??

Answer 3

Dans un premier temps, je quelque chose de simple, comme Bassistance.de

je me suis déplacé à l'aide d'une autre bibliothèque par devBridge

devBridge a une option appelée "onSelect:" qui me permettent d'auto-soumettre le formulaire.

Answer 4

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

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

Answer 5

$(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 fonctionne bien :)