Jenchy UI autocomplete; MinLength: 0 question

J'utilise un JQuery UI auto-complete. Je spécifie la longueur min. Si je spécifie minLength:2 je dois taper 2 caractères avant que le service ne se déclenche. Si je spécifie minLength:1 je dois seulement taper un caractère avant que le service source ne se déclenche.

Cependant, lorsque je spécifie minLength:0 j'ai encore besoin de taper un caractère. Alors, quel est le point de 0 ? Comment est-ce différent de 1 ? Le comportement attendu et souhaité serait de le déclencher aussitôt que l'entrée a l'accent …?

Des idées?

Mise à jour: pour la plupart, la solution de karim ci-dessous fonctionne, mais lorsque vous cliquez sur l'entrée, les options s'affichent et lorsque l'on clique, la source est re-soumise à la chaîne vide plutôt qu'à la nouvelle option qui vient d'être sélectionnée, de sorte que les options d'achèvement automatique Apparaître après avoir sélectionné une option sont les mêmes que si la boîte était vide .

Consultez la documentation de la méthode de search :

Déclenche un événement de recherche qui, lorsque les données sont disponibles, affichera les suggestions; Peut être utilisé par un bouton de type selectbox pour ouvrir les suggestions en cliquant dessus. Si aucun argument de valeur n'est spécifié, la valeur de l'entrée actuelle est utilisée. Peut être appelé avec une chaîne vide et minLength: 0 pour afficher tous les éléments.

 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"/> 

Je comprends à travers l'expérience pourquoi la réponse acceptée (j'ai voté) peut être considérée comme un peu incomplète. J'ai ajouté un peu d'intention de rendre l'UX plus combo-box-like:

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

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 plus clair ce qu'est le texte qui est envoyé au service de remplissage automatique lorsque le champ se concentre. En particulier, il est clair pourquoi il 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()); }); 

J'ai eu le même problème et j'ai compris comment résoudre ce problème.

Le problème est que, lorsqu'une option a été sélectionnée, l'entrée sera concentrée, cette opération fonctionnera sans filtre et affichera autocomplete l' autocomplete .

Ce problème ne se produit pas lorsque vous sélectionnez par le clavier car l' input est déjà mise au point, de sorte que le code qui se trouve à l'intérieur ne se reproduira plus.

Donc, pour contourner ce problème, nous devons savoir quand l'accent 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 quand l' event a été déclenché automatiquement ou par l'utilisateur.

Démo de travail

Cela fonctionne vraiment! 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); }); 

Le menu de la suggestion s'affiche pour la deuxième fois, car le fait de cliquer sur un élément dans le menu de la suggestion provoque la récupération de la zone de texte, mais la valeur du texte n'est pas mise à jour lorsque la mise au point est déclenchée à nouveau. Une fois la zone de texte retrouvée, le menu de la suggestion est déclenché.

Je ne sais pas comment nous pourrions résoudre ce problème, mais faites-moi savoir si quelqu'un d'entre vous est confronté au problème similaire