web-dev-qa-db-fra.com

Jquery UI autocomplete; minLength: 0 numéro

J'utilise une interface utilisateur JQuery UI. Je spécifie la longueur minimale. Si je spécifie minLength:2, je dois taper 2 caractères avant le démarrage du service. Si je spécifie minLength:1, il me suffit de saisir un caractère avant le déclenchement du service source.

Cependant, lorsque je spécifie minLength:0, je dois toujours saisir un caractère. Alors quel est le point de 0? en quoi est-ce différent de 1? Le comportement attendu et souhaité serait qu'il se déclenche dès que l'entrée a le focus ...?

Des idées?

Mise à jour: La plupart des solutions de karim ci-dessous fonctionnent. Toutefois, lorsque vous cliquez sur l'entrée, les options s'affichent et lorsque vous cliquez sur la source, la source est soumise à nouveau chaîne vide plutôt que nouvelle option qui vient d'être sélectionné, les options de saisie semi-automatique qui apparaissent après la sélection d'une option sont alors identiques à celles de identiques à celles de la case vide.

javascriptjqueryhtmljquery-uiautocomplete
37
kralco626

Consultez la search documentation de la méthode:

Déclenche un événement de recherche qui, quand les données sont disponibles, puis afficheront les suggestions; peut être utilisé par un bouton semblable à une boîte pour ouvrir le fichier suggestions lorsque vous cliquez dessus. Si aucune valeur l'argument est spécifié, le courant la valeur de l'entrée est utilisée. Peut être appelé avec une chaîne vide et minLength: 0 pour afficher tous les articles.

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

var firstVal = source[0];

$("input#autocomplete").autocomplete({
    minLength: 0,
    source: source,
}).focus(function() {
    $(this).autocomplete("search", $(this).val());
});
.ui-menu-item{
  background : rgb(215, 215, 215);;  
  border : 1px solid white;
  list-style-type: none;
  cursor : pointer;
}

.ui-menu-item:hover{
  background : rgb(200, 200, 200);
}


.ui-autocomplete{
   padding-left:0;
   margin-top  : 5px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.5/jquery-ui.js"></script>
<input id="autocomplete"/>&nbsp;<input id="submit" type="submit"/>

54
karim79

Je comprends expérimentalement pourquoi la réponse acceptée (j'ai voté contre) peut être considérée comme légèrement incomplète. J'ai ajouté un peu d'intention pour que l'UX ressemble davantage à une boîte à fonctions:

$('#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', '');
});
6
rasx

J'ai eu le même problème, et résolu de cette façon. Je pense que le code ci-dessous explique beaucoup plus clairement le texte envoyé au service d'auto-complétion lorsque le champ est activé. 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());
});
3
Luca

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);
    });
1
Victor

J'ai eu le même problème et j'ai obtenu comment contourner ce problème.

Le problème est que, lorsqu'une option a été sélectionnée, l'entrée sera focalisée, ceci exécutera search sans aucun filtre et affichera à nouveau la autocomplete.

Ce problème ne se produit pas lorsque vous sélectionnez au clavier, car la input est déjà active et le code contenu dans focus ne sera pas exécuté à nouveau.

Donc, pour résoudre ce problème, nous devons savoir quand le focus est déclenché par un événement souris/keyboar.

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

e.isTrigger est utilisé par jQuery pour identifier le moment où event a été déclenché automatiquement ou par l'utilisateur.

démo de travail

1
Ricardo Alvaro Lohmann

le menu de suggestion s'affiche pour la deuxième fois, car cliquer sur un élément du menu de suggestion entraîne le rappel de la zone de texte. Toutefois, la valeur du texte n'est pas mise à jour lorsque le focus est réactivé.

Je ne sais pas comment nous pourrions résoudre ce problème, mais laissez-moi savoir si quelqu'un d'entre vous fait face au même problème

0
PradGar

Je sais que ce fil est très ancien, mais je rencontre exactement le même problème et aucune des solutions proposées ci-dessus ne semble fonctionner ... Je suppose que cela est dû aux mises à jour de Jquery? Si quelqu'un pouvait publier un exemple de travail mis à jour (par exemple, jquery-1.12.4.js // 1.12.1/jquery-ui.js), ce serait fantastique.

0
Paul Clift