jQuery autoComplete view all on click ?

Question

J'utilise l'autocomplétion 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 puis-je ajouter un événement onclick (comme un bouton ou un lien) qui affichera tous les choix disponibles pour l'autocomplétion ? En fait, je cherche à créer un hybride entre une saisie semi-automatique et un élément de sélection ou de décompression.

Gracias.

Answer 1

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

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

Ou voyez l'exemple dans le lien ci-dessous. Cela ressemble exactement à ce que vous voulez faire.

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

EDITAR (de @cnanney)

Remarque : Vous devez définir minLength : 0 dans votre autocomplétion pour qu'une chaîne de recherche vide renvoie tous les éléments.

Answer 2

J'ai trouvé que cela fonctionnait 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)

Answer 3

Je ne vois pas de moyen évident de le faire dans la documentation, mais vous pouvez essayer de déclencher l'événement focus (ou clic) sur la zone de texte activée par l'autocomplétion :

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

Answer 4

Afin d'afficher tous les éléments / de simuler le comportement d'une combobox, 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 de clic pour effectuer une recherche avec la chaîne vide.

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

Answer 5

Solution de : Affichage de la liste auto-complète de l'interface utilisateur jquery sur l'événement focus

La solution pour que cela fonctionne 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());
    });
});