38 votes

Jquery UI autocomplete; minLength: 0 numéro

Je suis l'aide d'une INTERFACE utilisateur de JQuery auto-complet. Je suis en spécifiant la longueur minimale. Si je spécifie minLength:2 j'ai besoin de type 2 caractères avant que le service des incendies. Si je spécifie minLength:1 alors que j'ai seulement besoin de taper un caractère avant de la source du service des incendies.

Cependant, lorsque je spécifie minLength:0 - je encore besoin de taper un caractère. Ainsi quel est le point de 0? comment est-elle différente de l' 1? L'attendu et désiré, le comportement serait, pour elle, le feu dès que l'entrée a de l'accent...?

Des idées?

Mise à jour: Pour la plupart, karim solution ci-dessous fonctionne, cependant quand vous cliquez sur l'entrée les options de venir et quand on clique sur la source est de nouveau soumis à la chaîne vide plutôt que de le nouvelle option qui a été choisie, de sorte que l'auto-complétion des options qui viennent après la sélection d'une option sont que de même que si la boîte était vide.

62voto

karim79 Points 178055

Découvrez l' search documentation de la méthode:

Déclenche une recherche de l'événement, qui, lorsqu' les données sont disponibles, puis affiche les suggestions; peut être utilisé par un selectbox-comme le bouton pour ouvrir la suggestions lorsque l'utilisateur clique dessus. Si aucune valeur n' argument est spécifié, le courant entrée de la valeur est utilisée. Peut être appelé avec une chaîne vide et minLength: 0 pour afficher tous les éléments.

Ce n':

<input id="autocomplete"/>&nbsp;<input id="submit" type="submit"/>

var source = ['One', 'Two', 'Three', 'Four'];

var firstVal = source[0];

$("input#autocomplete").autocomplete({
    minLength: 0,
    source: source
}).focus(function() {
    $(this).autocomplete("search", "");
});

Essayez: http://jsfiddle.net/karim79/fYVrD/

7voto

rasx Points 1858

Je comprends par expérience pourquoi la réponse acceptée (j'ai voté positivement) peut être considérée comme légèrement incomplète. J'ai ajouté un peu d'intention pour rendre l'UX plus semblable à une boîte combinée:

 $('#Carrier').autocomplete(
{
    source: '@Url.Action("AutocompleteCarrier", "Client")',
    minLength: 0,
    select: function (event, data) {
        $(this).autocomplete('disable');
    }
})
.blur(function(){
    $(this).autocomplete('enable');
})
.focus(function () {
    $(this).autocomplete('search', '');
});
 

3voto

Luca Points 155

J'ai eu le même problème et je l'ai résolu de cette façon. Je pense que le code ci-dessous rend beaucoup plus clair quel est le texte qui est envoyé au service de saisie semi-automatique lorsque le champ obtient le focus. En particulier, il est clair pourquoi cela fonctionne lorsque le champ contient déjà quelque chose.

 $(function() {
$("input#autocomplete").autocomplete({
        source: "completion.html",
        minLength: 0,
        select: function( event, ui ) {}
    });
});
$("input#autocomplete").focus(function() {
    $(this).autocomplete("search", $(this).val());
});
 

2voto

J'ai eu le même problème et j'ai eu la façon de contourner ce problème.

Le problème est que lorsqu'une option a été sélectionnée, l'entrée sera porté, ce sera exécutée search , sans filtre et montrera l' autocomplete de nouveau.

Ce problème ne se produit pas lorsque vous sélectionnez le clavier parce que l' input est déjà au point, de sorte que le code qui est à l'intérieur d' focus ne sera pas exécuté de nouveau.

Donc, pour contourner ce problème, nous devons savoir que lorsque le focus est déclenchée par l'un quelconque de la souris/le clavier de l'événement.

jQuery("input#autocomplete").focus(function(e) {
    if(!e.isTrigger) {
        jQuery(this).autocomplete("search", "");
    }
    e.stopPropagation();
});

e.isTrigger est utilisée par jQuery pour identifier lors de l' event a été déclenché automatiquement ou par l'utilisateur.

travail de démonstration

1voto

Victor Points 436

Cela fonctionne réellement! Testé sur IE, FireFox

 $("input#autocomplete").autocomplete({
minLength: 0,
source: source,
}).focus(function() {
        setTimeout( "if ($('#input#autocomplete').val().length == 0) $('#input#autocomplete').autocomplete(\"search\", \"\"); ",1);
    });
 

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

X