jQuery autocomplete Sehen Sie alle auf Klick?

Question

Ich bin jQuery Autocomplete auf relativ einfache Art und Weise mit:

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

Wie füge ich ein Onclick-Ereignis (wie eine Schaltfläche oder einen Link), die alle verfügbaren Auswahlmöglichkeiten für die Autovervollständigung angezeigt wird? Grundsätzlich suche ich eine Mischung aus einer zum automatischen Vervollständigung und ein select / Drop-down-Element zu machen.

Danke!

Answer 1

Ich kann nicht eine offensichtliche Art und Weise sehen, dass in der Dokumentation zu tun, aber Sie versuchen, das Auslösen der Fokus (oder klicken) Ereignis auf dem die automatische Vervollständigung aktiviert Textbox:

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

Answer 2

Sie können dieses Ereignis auslösen alle Optionen zeigen:

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

Oder das Beispiel in dem unten stehenden Link sehen. Sieht aus wie genau das, was Sie tun möchten.

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

Bearbeiten (von @cnanney)

Hinweis: Sie müssen eingestellt minLength: 0 in der die automatische Vervollständigung für eine leere Suchzeichenfolge alle Elemente zurück

.

Answer 3

Das fand ich am besten funktionieren

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

Es sucht die Etiketten und legt den Wert in das Element $ (# Beispiel)

Answer 4

Um alle Elemente anzuzeigen / Combobox Verhalten zu simulieren, sollten Sie zunächst sicherstellen, dass Sie die minLength Option eingestellt haben, dass 0 (Standard ist 1). Dann können Sie das Click-Ereignis binden, um eine Suche mit dem leeren String auszuführen.

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

Answer 5

Lösung aus: Anzeige jquery ui auto-complete-Liste auf Ereignis konzentrieren

Die Lösung, damit es mehr Arbeit als einmal

<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

versuchen Sie dies:

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

und minLength auf 0

funktioniert jedes Mal:)

Answer 7

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

Answer 8

Sie muss gesetzt minLength auf Null , um diese Arbeit zu machen! Hier ist das Arbeitsbeispiel.

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

Answer 9

Das ist das einzige, was für mich funktioniert. Liste zeigt immer und schließt bei Auswahl:

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

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

Answer 10

Sie können diese verwenden:

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

Answer 11

Dies zeigt alle Optionen: "%" (siehe unten)

Das Wichtigste ist, dass man es unter der vorherige #example Erklärung zu setzen hat, wie im Beispiel unten. Das dauerte eine Weile, um herauszufinden.

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

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

Answer 12

hoffe, das hilft jemand:

$('#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

Ich löste dies mit Attribut minChars: 0 und nach auslösen, zwei Klicks. (Zur automatischen Vervollständigung zeigt nach 1 Klick auf Eingang) mein 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

Ich habe alle Antworten zu sehen, die vollständig zu sein scheinen.

Wenn Sie möchten, um die Liste zu bekommen, wenn der Cursor im Textfeld ist, oder wenn Sie auf das passende Etikett klicken Sie hier, wie Sie tun können:

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

Dies funktioniert in 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

Ich kann nicht das $("#example").autocomplete( "search", "" ); Teil an der Arbeit, nur wenn ich meine Suche mit einem Charakter verändert, dass es funktioniert in meiner Quelle vorhanden ist. So dann habe ich zum Beispiel $("#example").autocomplete( "search", "a" );.

Answer 18

Ich denke, eine bessere Option ist $ ( "# idName") setzt die automatische Vervollständigung ( "Suche", ""); in das Onclick Paramter des Textfeldes. Da bei der Auswahl wird ein Fokus von jquery setzt in, kann dies ein Problem zu umgehen sein. Weiß nicht, ob es eine akzeptable Lösung sein sollte.

Answer 19

Ich brauchte diese vor kurzem zu tun, und nach ein paar verschiedenen Permutationen versucht (mit onfocus, Onclick von Textbox etc), habe ich endlich auf diesem angesiedelt ...

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

Es öffnet sich das Autocomplete ddl Liste auf Fokus (Auch wenn Sie Standardtext in Ihrem Eingabefeld haben, wie ich oben tun).

Es ist auch Auto-wählt der Text in dem Textfeld die Benutzer zu verhindern, dass der Text zu löschen.

Sobald ein Element aus der automatischen Vervollständigung Liste ausgewählt wird, setzt es dieses Element in das automatischen Vervollständigung Eingabefeld ein und verschiebt den Fokus auf ein anderes Steuerelement (und verhindert so das automatische Vervollständigung von erneuten Öffnen).

Ich plane, es zu ersetzen durch Hinzufügen dynamischen Ajax-Aufrufe zu dem sehr schönen Chosen Auswahllisten mit den Melting Ice aktualisieren wenn ich bekommt eine Chance.

Answer 20

Ich habe diese Art und Weise:

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

Dann

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

Sie können auch Suchfunktion ohne Parameter verwenden:

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