jQuery autoComplete la vue de tous sur le clic?

, Vous pouvez déclencher cet événement pour afficher toutes les options:

$("#example").autocomplete( "search", "" );

Ou voir l'exemple dans le lien ci-dessous. Ressemble exactement ce que vous voulez faire.

http://jqueryui.com/demos/autocomplete/#combobox

EDIT (de @cnanney)

Note: vous devez définir minLength: 0 dans votre autocomplete pour qu'une chaîne de recherche vide renvoie tous les éléments.

j'ai trouvé que c'était mieux

var data = [
    { label: "Choice 1", value: "choice_1" },
    { label: "Choice 2", value: "choice_2" },
    { label: "Choice 3", value: "choice_3" }
];

$("#example")
.autocomplete({
    source: data,
    minLength: 0
})
.focus(function() {
    $(this).autocomplete('search', $(this).val())
});

recherche les étiquettes et place la valeur dans l'élément $(#example)

afin de montrer tous les éléments / simuler le comportement de combobox, vous devez d'abord vous assurer que vous avez défini l'option minLength à 0 (par défaut est 1). Ensuite, vous pouvez lier l'événement click pour effectuer une recherche avec la chaîne vide.

$('inputSelector').autocomplete({ minLength: 0 });
$('inputSelector').click(function() { $(this).autocomplete("search", ""); });

solution: Affichage jquery ui auto-liste complète sur les événements de focus

La solution pour le faire fonctionner plus d'une fois

<script type="text/javascript">
$(function() {
    $('#id').autocomplete({
        source: ["ActionScript",
                    /* ... */
                ],
        minLength: 0
    }).focus(function(){     
        //Use the below line instead of triggering keydown
        $(this).data("autocomplete").search($(this).val());
    });
});

essayez ceci:

    $('#autocomplete').focus(function(){
        $(this).val('');
        $(this).keydown();
    }); 

et minLength mis à 0

fonctionne à chaque fois :)

 $j(".auto_complete").focus(function() { $j(this).keydown(); })

c'est la seule chose qui fonctionne pour moi. La liste montre chaque fois et ferme sur la sélection:

$("#example")
.autocomplete(...)
.focus(function()
{
  var self = this;

  window.setTimeout(function()
  {
    if (self.value.length == 0)
      $(self).autocomplete('search', '');
  });
})

vous pouvez utiliser ceci:

$("#example").autocomplete( "search",  $("#input").val() );

indique toutes les options: "%" (voir ci-dessous)

l'important est de le placer sous la déclaration #example précédente, comme dans l'exemple ci-dessous. Ce qui m'a pris un certain temps à comprendre.

$( "#example" ).autocomplete({
            source: "countries.php",
            minLength: 1,
            selectFirst: true
});

$("#example").autocomplete( "search", "%" );

espérons que cela aide quelqu'un:

$('#id')
        .autocomplete({
            source: hints_array,
            minLength: 0, //how many chars to start search for
            position: { my: "left bottom", at: "left top", collision: "flip" } // so that it automatically flips the autocomplete above the input if at the bottom
            })
        .focus(function() {
        $(this).autocomplete('search', $(this).val()) //auto trigger the search with whatever's in the box
        })

<input type="text" name="q" id="q" placeholder="Selecciona..."/>


<script type="text/javascript">
//Mostrar el autocompletado con el evento focus
//Duda o comentario: http://WilzonMB.com
$(function () {
    var availableTags = [
        "MongoDB",
        "ExpressJS",
        "Angular",
        "NodeJS",
        "JavaScript",                
        "jQuery",
        "jQuery UI",
        "PHP",
        "Zend Framework",
        "JSON",
        "MySQL",
        "PostgreSQL",
        "SQL Server",
        "Oracle",
        "Informix",
        "Java",
        "Visual basic",
        "Yii",
        "Technology",
        "WilzonMB.com"
    ];
    $("#q").autocomplete({
        source: availableTags,
        minLength: 0
    }).focus(function(){            
       $(this).autocomplete('search', $(this).val())
     });
});
</script>

http://jsfiddle.net/wimarbueno/6zz8euqe /

Vous doit set minLenght à zéro pour faire ce travail! Voici l'exemple de travail.

$( "#dropdownlist" ).autocomplete({
      source: availableTags,
      minLength: 0 
    }).focus(function() {
      $(this).autocomplete('search', $(this).val())
    });
});

j'ai résolu cela en utilisant attribut minChars: 0 et après, déclenchez deux clics. (montre autocomplete après 1 clic sur l'entrée) mon code

<input type='text' onfocus='setAutocomplete(this)'>

function setAutocomplete(el){
    $(el).unbind().autocomplete("./index.php", {autoFill:false, minChars:0, matchContains:true, max:20});
    $(el).trigger("click");$(el).trigger("click");
}

j'ai vu toutes les réponses qui semblent être complète.

si vous voulez obtenir la liste lorsque le curseur est dans le champ de texte ou lorsque vous cliquez sur l'étiquette correspondante, ici comment faire:

//YourDataArray = ["foo","bar"];
$( "#YourID" ).autocomplete({
            source: YourDataArray 
        }).click(function() { $(this).autocomplete("search", " "); });

cela fonctionne très bien dans Firefox, IE, Chrome ...

$("#searchPkgKeyWord").autocomplete("searchURL",
        {
            width: 298,
            max: 1000,
            selectFirst: false
        }).result(function (event, row, formatted) {
            callback(row[1]);
        }).focus(function(){
            $(this).click(); //once the input focus, all the research will show
        });

Je ne pouvais pas obtenir la partie $("#example").autocomplete( "search", "" ); de travailler, seulement une fois que j'ai changé ma recherche avec un caractère qui existe dans ma source que cela fonctionne. J'ai donc utilisé par exemple $("#example").autocomplete( "search", "a" ); .

je suppose qu'une meilleure option est de mettre $("#idname").autocomplete ("search",""); dans le paramètre onclick de la zone de texte . Depuis sur sélectionnez, l'accent est mis par jquery , cela peut être une solution de contournement . Ne sais pas si elle devrait être une solution acceptable.

j'avais besoin de faire cela récemment et après avoir essayé quelques permutations différentes (en utilisant onfocus, onclick de textbox etc), je me suis finalement décidé sur ceci...

 <input id="autocomplete" name="autocomplete" type="text" 
 value="Choose Document">

 <p>
 <button type="submit" value="Submit" name="submit" id="submit" >
  Submit
 </button>
 </p>

<script type="text/javascript">

$("#autocomplete").autocomplete(
{
source: '@Url.Content("~/Document/DocumentTypeAutoComplete/")' //<--ddl source
, minLength: 0 // <-- This is necessary to get the search going on blank input
, delay: 0
, select: function (event, ui) 
  {
  if (ui.item) {
     $("#autocomplete").val(ui.item.value);//<-- Place selection in the textbox
          $("docForm").submit(); 
          loadDocTypeCreatePartial(ui.item);
          $("#submit").focus(); //This stops the drop down list from reopening 
                                // after an item in the select box is chosen
                                // You can place the focus anywhere you'd like,
                                // I just chose my *submit* button
                }
   }
  }).focus(function () {
    // following line will autoselect textbox text
    // making it easier for the user to overwrite whats in the 
    // textbox
    $(this).select();

    //The below line triggers the search function on an empty string
    $(this).data("autocomplete").search('');
   });
 </script>

ouvre la liste ddl autocomplete sur focus (même si vous avez du texte par défaut dans votre boîte de saisie comme je le fais ci-dessus).

Il est aussi auto-sélectionne le texte dans la zone de texte pour empêcher l'utilisateur d'avoir à effacer le texte.

une fois qu'un article est sélectionné à partir de la liste auto-complète, il place cet élément dans la boîte d'entrée auto-complète et déplace le focus vers un autre contrôle (empêchant ainsi l'auto-complète de rouvrir).

j'ai l'intention de le remplacer par l'ajout dynamique des appels Ajax pour la très belle Choisi des listes de sélection avec le Fonte des Glaces mise à niveau lorsque je reçois une chance.

j'ai utilisé ce chemin:

$("#autocomplete").autocomplete({
                source: YourDataArray,
                minLength: 0,
                delay: 0
            });

puis

OnClientClick="Suggest(this); return false;"/>

 function Suggest(control) {
                var acControl = $("#" + control.id).siblings(".ui-autocomplete-input");
                var val = acControl.val();
                acControl.focus();
                acControl.autocomplete("search");