jQuery autoComplete voir tous sur un clic?

Question

J'utilise la saisie semi-automatique jQuery d'une manière relativement simple:

$(document).ready(function() {
  var data = [ {text: "Choice 1"}, 
               {text: "Choice 2"}, 
               {text: "Choice 3"} ]

$("#example").autocomplete(data, {
  matchContains: true,
  minChars: 0,
  formatItem: function(item) 
    { return item.text; }
    }
  );
  });

Comment puis-je ajouter un événement onclick (comme un bouton ou un lien) qui affiche tous les choix disponibles pour la saisie semi-automatique? Fondamentalement, je suis à la recherche de faire un hybride d'un autocomplete et un élément de sélection / menu déroulant.

Merci!

Answer 1

Je ne vois pas de façon évidente de le faire dans la documentation, mais vous essayez déclencher la mise au point (ou cliquez) événement sur la saisie semi-automatique activée zone de texte:

$('#myButton').click(function() {
   $('#autocomplete').trigger("focus"); //or "click", at least one should work
});

Answer 2

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

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

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

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

modifier (de @cnanney)

Remarque: Vous devez définir minLength: 0 dans votre saisie semi-automatique pour une chaîne de recherche vide pour récupérer tous les éléments

.

Answer 3

J'ai trouvé que cela fonctionne 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())
});

Il recherche les étiquettes et place la valeur dans le $ élément (# exemple)

Answer 4

Pour afficher tous les éléments / simuler le comportement combobox, vous devez d'abord vous assurer que vous avez défini l'option minLength à 0 (valeur 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", ""); });

Answer 5

solution de: Afficher la liste complète jquery ui-auto sur concentrer l'événement

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

Answer 6

essayez ceci:

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

et minLength à définir 0

fonctionne à chaque fois:)

Answer 7

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

Answer 8

devez set minLength zéro afin de faire ce travail! Voici l'exemple de travail.

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

Answer 9

est la seule chose qui fonctionne pour moi. Liste montre à chaque fois et se ferme lors de la sélection:

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

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

Answer 10

vous pouvez utiliser ceci:

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

Answer 11

ce qui montre toutes les options: "%" (voir ci-dessous)

La chose importante est que vous devez placer sous la déclaration de #exemple précédente, comme dans l'exemple ci-dessous. Cela m'a pris un certain temps pour comprendre.

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

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

Answer 12

espoir 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
        })

Answer 13

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

Answer 14

Je résolu ce problème en utilisant attribuer minChars: 0 et après, déclenche deux clics. (Saisie semi-automatique montre 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");
}

Answer 15

Je l'ai vu toutes les réponses qui semblent être complètes.

Si vous souhaitez obtenir la liste lorsque le curseur se trouve dans le champ de texte ou lorsque vous cliquez sur l'étiquette correspondant, voici comment vous pouvez faire:

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

cela fonctionne bien dans Firefox, IE, Chrome ...

Answer 16

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

Answer 17

Je ne pouvais pas la partie $("#example").autocomplete( "search", "" ); au travail, une seule fois j'ai changé ma recherche avec un caractère qui existe dans ma source fonctionner. Donc, je puis utilisé par exemple $("#example").autocomplete( "search", "a" );.

Answer 18

Je suppose une meilleure option est de mettre $ ( "# idName") autocomplete ( "recherche", ""). dans le paramter onclick de la zone de texte. Depuis le sélectionner, l'accent est mis en par jquery, cela peut être une solution de contournement. Ne pas savoir si elle doit être une solution acceptable.

Answer 19

Je devais le faire récemment et après avoir essayé quelques permutations différentes (en utilisant onfocus, onclick etc textbox), je me suis finalement installé sur ce ...

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

Ceci ouvre la liste de saisie semi-automatique ddl sur mise au point (Même si vous avez un texte par défaut dans votre boîte d'entrée comme je le fais ci-dessus).

Il a également sélectionne automatiquement le texte dans la zone de texte pour empêcher l'utilisateur d'avoir à effacer le texte.

Une fois qu'un élément est sélectionné dans la liste de remplissage automatique, il met cet élément dans la zone d'entrée de remplissage automatique et la mise au point se déplace vers une autre commande (empêchant ainsi la réouverture de semi-automatique).

Je prévois de le remplacer par l'ajout dynamique Ajax appelle à la très belle Elu listes de sélection avec le la fonte des glaces mise à niveau lorsque je la chance.

Answer 20

J'utilisé de cette façon:

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

Ensuite

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");

Answer 21

Vous pouvez également utiliser la fonction de recherche sans paramètres:

jQuery("#id").autocomplete("search", "");