web-dev-qa-db-fra.com

jQuery autoComplete afficher tout en un clic?

J'utilise la saisie semi-automatique de 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 ajouter un événement onclick (comme un bouton ou un lien) qui affichera tous les choix disponibles pour la saisie semi-automatique? Fondamentalement, je cherche à faire un hybride d'une saisie semi-automatique et d'un élément de sélection/liste déroulante.

Merci!

jqueryautocompletejquery-autocomplete
59
Rio

Je ne vois pas de façon évidente de le faire dans les documents, mais vous essayez de déclencher l'événement focus (ou clic) sur la zone de texte activée pour la saisie semi-automatique:

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

Vous pouvez déclencher cet événement pour afficher 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 qu'une chaîne de recherche vide renvoie tous les éléments.

99
Tom Pietrosanti

J'ai trouvé que cela fonctionnait le 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 l'élément $ (# exemple)

35
Craig

Afin d'afficher tous les éléments/simuler le comportement de la zone de liste déroulante, vous devez d'abord vous assurer que vous avez défini l'option minLength sur 0 (la valeur par défaut est 1). Vous pouvez ensuite lier l'événement click pour effectuer une recherche avec la chaîne vide.

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

solution de: Afficher la liste de saisie automatique jquery ui sur l'événement 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());
    });
});
5
SUF

essaye ça:

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

et minLength réglé sur

fonctionne à chaque fois :)

4
Cobaltus
 $j(".auto_complete").focus(function() { $j(this).keydown(); })
3
Tom

Vous devez mettre minLength à zéro pour que cela fonctionne! Voici l'exemple de travail.

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

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

L'important est que vous devez le placer sous la déclaration #example 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", "%" );
2
Sebastian

c'est la seule chose qui fonctionne pour moi. La liste s'affiche à 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', '');
  });
})
2
Chris

vous pouvez utiliser ceci:

$("#example").autocomplete( "search",  $("#input").val() );
2
Renato Chea
<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/

2
Wilzon

j'espère 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
        })
2
Tsonev

J'ai résolu cela en utilisant l'attribut minChars: 0 et après, déclencher deux clics. (la saisie semi-automatique s'affiche 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");
}
1
Mesrop
$("#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
        });
1
jackqqxu

J'ai vu toutes les réponses qui semblent complètes.

Si vous souhaitez obtenir la liste lorsque le curseur est dans le champ de texte OR lorsque vous cliquez sur l'étiquette correspondante, voici comment faire:

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

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

1
josemaria

Je suppose qu'une meilleure option est de mettre $ ("# idname"). Autocomplete ("search", ""); dans le paramètre onclick de la zone de texte. Étant donné que sur select, un focus est mis par jquery, cela peut être une solution de contournement. Je ne sais pas si cela devrait être une solution acceptable.

0
human.js

J'ai 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");
0
91m0n

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

0
Kosmosniks

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

jQuery("#id").autocomplete("search", "");
0
Jean-David

J'avais besoin de le faire récemment et après avoir essayé quelques permutations différentes (en utilisant onfocus, onclick de zone de texte, etc.), je me suis finalement posé la question ...

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

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

Il sélectionne également 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 saisie semi-automatique, il place cet élément dans la zone de saisie de saisie semi-automatique et déplace le focus vers un autre contrôle (empêchant ainsi la saisie semi-automatique de se rouvrir).

Je prévois de le remplacer en ajoutant des appels Ajax dynamiques à la très belle Chosen sélectionnez les listes avec les Melting Ice upgrade quand j'en ai l'occasion.

0
De Shan Baptiste