jQuery UI Autocomplete comportement. Comment faire une recherche en texte libre sur entrer?

première question (et, espérons-le, hésitant mais ma seule)

J'utilise le jQuery UI Autocomplete. Voici un exemple de code à reproduire mon problème.

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

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

Lorsqu'un utilisateur tape 'J' elles seront présentées avec "Clojure' et 'JavaScript' comme des suggestions.

J'ai omis de Java à partir de cette liste, si l'utilisateur souhaite effectuer une recherche pour Java, ils type "Java", appuyez sur la touche entrée, mais le formulaire ne s'y soumettent pas. Si vous ajoutez un espace de la 'JavaScript' suggestion disparaît et le formulaire peut être envoyé en appuyant sur la touche entrée.

Je suis de la création d'une recherche libre, je veux que les utilisateurs soient en mesure de rechercher en appuyant sur entrer, même si il y a des suggestions disponibles.

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

J'ai essayé ci-dessus en pensant que je pouvais détecter manuellement un bouton-pression de touche et de soumettre le formulaire, mais l'alerte affiche toutes les clés sont détectés à l'EXCEPTION de présenter ce qui semble être supprimée par la saisie semi-automatique.

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

InformationsquelleAutor John | 2010-09-24

8

Mise à JOUR

J'ai dû faire quelques changements, mais ce code fonctionne très bien sur mon côté après l'avoir fait. Tout d'abord, l'e.keycode courriel.mot de code. Je ne pense pas que le cas de l'importance, mais il le fait. Aussi, assurez-vous de ne pas citer le 13 lorsque vous vérifiez le mot de code pour être le bouton enter. Il 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 touche de fonction devrait ressembler à ci-dessous, et vous pouvez également la chaîne de la saisie semi-automatique et pression de touches de fonctions pour le rendre plus facile sur vous. Ci-dessous le code 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');
    }
});
```
- Salut, je vous remercie de prendre la peine de réponse.
- Oups, semble Débordement de Pile a le problème inverse et entrez envoyé ma réponse au lieu de la ligne nouvelle, j'attendais! Ce code ne résout pas le problème, pour une raison quelconque la touche entrée, le code '13' n'est pas reconnu par pression de touche. C'est comme sa été volontairement désactivé, je ne peux pas travailler sur la façon de l'activer! Si vous créer un div avec id='clé' et ajouter les éléments suivants à l'intérieur de la touche de fonction: $('#key').texte (Touche': '+ e.keyCode); et le type, vous verrez ce que je veux dire! Il ne recevra '13' si il n'y a pas de suggestions. Toutes les idées sur la façon de le forcer à soumettre à entrer? Merci!
- Merci pour la mise à jour... ne fonctionne toujours pas sur ma fin (j'ai utilisé Chrome, votre navigateur peut gérer différemment?) mais j'ai réussi à le faire ici aussi. À la recherche lors de la saisie semi-automatique de code, il avait un keydown lier où sur la touche entrée est pressée: if ( self.menu.de l'élément.is( ":visible" ) ) { event.preventDefault(); } c'est Ce que l'arrêté du formulaire de soumission sur enter (le comportement par défaut, j'ai essayé de restaurer!). Avec cela à l'esprit, tout ce que nous devons faire est de remplacer la pression de touche avec keydown et notre code fonctionne sur les navigateurs que j'ai essayé. Merci pour votre aide!
InformationsquelleAutor ryanulit
2

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

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

Voici 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() );
        }
    }
});
```
});

InformationsquelleAutor richardsun
1

À l'aide de l'INTERFACE de saisie semi-automatique du plugin version 1.8.5:

Look pour ce morceau de code

"cas d'.ENTRÉE:cas d'.NUMPAD_ENTER:un.menu.de l'élément.is(":visible")&&c.preventDefault();"

et de supprimer ou mettre en commentaire.

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

acclamations

Pete

InformationsquelleAutor Peter Tizzard

C'est ce que j'ai fait

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

InformationsquelleAutor gman

De saisie semi-automatique supprime 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)
    }
});

InformationsquelleAutor Eyjólfur Gislason

0

J'ai eu le même problème, et a été la pensée de l'utilisation de validation pour ce faire, mais à la fin, ma solution est beaucoup plus facile que d'autres solutions sur cette page:
1. Faire un champ de saisie, tapez le texte, nommé #input et un caché d'entrée nommé #hiddeninput. Votre recherche-backend devrez utiliser la valeur de #hiddeninput.
2. À l'intérieur de votre saisie semi-automatique, définissez la valeur de #hiddeninput à la demande.durée: (j'ai mis ceci à l'intérieur $.ajax({ success: }) )
$("input#hiddeninput").val(requête.terme);
1. Définir la saisie semi-automatique avec le sélectionner:-la méthode pour remplir le caché d'entrée avec la suggestion qui est choisi:
```
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 que l'utilisateur a tapé jusqu'à ce qu'il sélectionne quelque chose à partir des suggestions de la liste.

InformationsquelleAutor zenlord

<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 de recherche pour une étudiante. Si l'utilisateur appuie sur ENTRÉE, le formulaire devra se soumettre, même si rien n'a été sélectionné dans la liste. La 'réponse' événement de mise à jour de la valeur d'un champ caché avec le premier élément de la liste. Ils pourraient également cliquez sur ou sélectionnez-le dans la liste.

InformationsquelleAutor brainzone

Vous devez vous connecter pour publier un commentaire.