JQuery UI Comportement de saisie semi-automatique. Comment rechercher du texte libre sur entrer?

Question

première question (et j'espère, mais douteusement mon seul)

J'utilise le jQuery UI Autocomplete. Voici un exemple de code pour répliquer mon problème.

var suggestions = ["C", "Clojure", "JavaScript", "Perl", "PHP"]; 

$("#autocomplete").autocomplete({ 
    source: suggestions 
}); 

Quand ils seront présentés un utilisateur tape 'J' avec 'Clojure' et 'JavaScript' comme suggestions.

J'ai omis Java dans cette liste, si l'utilisateur veut rechercher Java, il tape 'Java', appuyez sur la touche Entrée, mais le formulaire n'est pas envoyé. Si vous ajoutez un espace, la suggestion 'JavaScript' disparaît et le formulaire peut être envoyé en appuyant sur la touche Entrée.

Je crée une recherche gratuite, je veux que les utilisateurs puissent rechercher en appuyant sur Entrée même s'il y a des suggestions disponibles.

$("#autocomplete").keypress(function(event) { 
    alert(event.keyCode); 
    if (event.keyCode=='13') $this.closest('form').submit(); 
}); 

J'ai essayé la pensée ci-dessus, je pouvais détecter manuellement soumettre keypress et soumettre le formulaire, mais l'alerte montre toutes les clés sont détectées SAUF présenter ce qui semble être supprimé par la saisie semi-automatique.

Toute aide est grandement appréciée! Merci.

Answer 1

MISE À JOUR

je devais faire quelques changements, mais ce code fonctionne très bien de mon côté après avoir fait cela. Tout d'abord, e.keycode doit être e.keyCode. Je ne pensais pas que l'affaire comptait, mais c'est le cas. Aussi, assurez-vous que vous ne citez pas le 13 lorsque vous vérifiez que keyCode est le bouton d'entrée. Cela ne fonctionnera pas correctement si vous le faites. Voici le nouveau code:

var suggestions = ["C", "Clojure", "JavaScript", "Perl", "PHP"]; 
$("#autocomplete").autocomplete({ 
    source: suggestions 
}).keypress(function(e) { 
    if (e.keyCode === 13) { 
     $(this).closest('form').trigger('submit'); 
    } 
}); 

---

La fonction devrait ressembler keypress ci-dessous, et aussi, vous pouvez enchaîner les autocomplete et les fonctions keypress pour le rendre plus facile pour vous. Le code ci-dessous devrait fonctionner.

var suggestions = ["C", "Clojure", "JavaScript", "Perl", "PHP"]; 
$("#autocomplete").autocomplete({ 
    source: suggestions 
}).keypress(function(e) { 
    if (e.keycode === 13) { 
     $(this).closest('form').trigger('submit'); 
    } 
}); 

Answer 2

supresses autocomplete soumettre, mais cela a fonctionné comme une solution de contournement pour moi:

jQuery.fn.go_url = function(id) { 
    var url="gl10.pl?ar=2010&listi=ts&niv=stovnsnr&rl=1290693052914&stovnsnr=replaceme"; 
    var ok; 
    if (ok=id.match(/^\d{6}$/)) { 
     url=url.replace(/replaceme/g,id); 
     location=url; 
    } 
} 
jQuery(function() { 
    jQuery("#stovnar").autocomplete({ 
     source: "autocomplete.pl?pname=stovnsnr", 
     minLength: 3, 
     select: function(event, ui) { if (ui.item) { jQuery.fn.go_url(ui.item.id); } } 
    }); 
}).keypress(function(e) { 
    if (e.keyCode === 13) { 
     v=jQuery("#stovnar").val(); 
     jQuery.fn.go_url(v) 
    } 
}); 

Answer 3

En utilisant la version plug-in Autocomplete UI 1.8.5:

Recherchez ce morceau de code

"cas d.ENTER: cas d.NUMPAD_ENTER: a.menu.element.is (": visible ") & & c.preventDefault();"

et supprimer ou commenter. Essentiellement ce qui a été dit ci-dessus, mais à partir de la version actuelle du plugin

acclamations

Pete

Answer 4

C'est ce que je faisais

<div class="ui-widget"> 
    <form action="javascript:alert('hey run some javascript code')"> 
     <input id="search" /> 
    </form> 
</div> 

Answer 5

J'ai eu le même problème, et a été pensée d'utiliser la validation pour ce faire, mais à la fin ma solution semble une beaucoup plus facile que d'autres solutions sur cette page:

1. Faire une entrée fi eld pour taper le texte, nommé #input et une entrée cachée nommée #hiddeninput. Votre moteur de recherche devra utiliser la valeur #hiddeninput.

2. l'intérieur de votre saisie semi-automatique, définissez la valeur de #hiddeninput à request.term: (je mis cela à l'intérieur $.ajax({ success: }))

$ ("# entrée hiddeninput") val (request.term.)

1. Réglez le autocomplete avec la sélection: -method pour remplir l'entrée cachée avec la suggestion qui est choisie:

select: function(event, ui) { 
    $("input#input").val(ui.item.label), 
    $("input#hiddeninput").val(ui.item.nr), 
    //Auto-submit upon selection 
    $(this).closest("form").submit(); 
} 

Maintenant, votre recherche sera effectuée sur ce l'utilisateur a tapé jusqu'à ce qu'il sélectionne quelque chose dans la liste des suggestions.

Answer 6

J'ai eu un problème similaire, le widget jquery-ui autocomplete déclenche l'événement select lorsque l'utilisateur sélectionne une suggestion de la liste, si la suggestion sélectionnée a été cliquée ou la touche Entrée enfoncée. Mais il n'a rien fait si l'utilisateur a tapé du texte et appuyé sur la touche d'entrée sans en sélectionnant un élément de la liste. Quand cela arrive, j'ai besoin de faire une recherche.

Il était facile d'ajouter un gestionnaire d'événements keypress, mais il a déclenché si une sélection avait été effectuée ou non. J'ai donc ajouté une variable, didSelect, pour maintenir l'état de sélection.

est ici la solution complète:

$(function() { 
var didSelect = false; 

$("#search").autocomplete({ 
    source: "/my_remote_search", 
    minLength: 2, 
    search: function (event, ui) { 
     didSelect = false; 
     return true; 
    }, 
    select: function(event, ui) { 
     if (ui.item) { 
      didSelect = true; 
      my_select_function(ui.item); 
     } 
    } 
}).keypress(function(e) { 
    if (e.keyCode == 13) { 
     if (! didSelect) { 
      my_search_function($("#search").val()); 
     } 
    } 
}); 

});

Answer 7

<script> 
    $(function() { 
     $('#student').autocomplete({ 
      source: '../ajx/student_list.php', 
      minLength: 3, 
      response: function(event, ui) { 
       $('#student_id').val(ui.content[0].id); 
      }, 
      select: function(event, ui) { 
       $('#student_id').val(ui.item.id); 
       $(this).closest('form').trigger('submit'); 
      } 
     }).keypress(function(e) { 
      if (e.keyCode === 13) { 
       $(this).closest('form').trigger('submit'); 
      } 
     }); 
    }); 
</script> 
<div> 
    <form action='../app/student_view.php'> 
     <input name='student_id' id='student_id' type='hidden' value=''> 
     <label for='student'>Student: </label> 
     <input id='student' /> 
    </form> 
</div> 

Ici, j'ai utilisé la saisie semi-automatique pour rechercher un étudiant. Si l'utilisateur appuie sur ENTRÉE, le formulaire est soumis, même si rien n'a été sélectionné dans la liste. L'événement 'response' mettrait à jour la valeur d'un champ de saisie caché avec le premier élément de la liste. Ils pourraient également cliquer ou sélectionner dans la liste.