Recherche par clic avec la saisie semi-automatique de Jquery

Je suis en train de simuler le Youtube de saisie semi-automatique de l'expérience de Recherche.

Je ne trouve pas l'option lorsque l'internaute clique sur un élément répertorié et est automatiquement procédé à la recherche pour le dit objet.

Mon codage est le suivant:

<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 les éléments répertoriés, cependant, il remplira la zone de recherche plutôt qu'en recherchant automatiquement.

source d'informationauteur Anraiki

  1. 21

    Je voulais le même comportement, à l'aide de jQueryui par défaut du widget de saisie semi-automatique. L'astuce est d'utiliser le "select" de l'événement, mais la présentation de votre sélectionnez gestionnaire ne donnera pas les résultats escomptés, car l'entrée ne sera pas encore la sélection remplis.

    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, de saisie semi-automatique est une url qui pointe vers l'achèvement de la source)

    Où l'entrée# "searchbox" est l'entrée, et #searchform est son formulaire parent. Fondamentalement, vous devez remplir l'entrée avant de présenter vous-même.

  2. 0

    Ne pouvez-vous pas tout simplement faire quelque chose comme:

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

    Où l'événement de clic sur votre liste d'option déclenche un formulaire pour soumettre votre formulaire de recherche??

  3. 0

    D'abord, j'ai utilisé quelque chose de simple comme Bassistance.de

    Je suis passée à l'aide d'une autre bibliothèque en devBridge

    devBridge a une option appelée "onSelect:" qui me permettent de m'auto-envoyer le formulaire.

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

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

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

            $("#searchform button").click(); }
    })
});

    Je me sers de ce travail de fin 🙂