jQuery autoComplete alle auf Klick anzeigen?

Question

Ich verwende die automatische Vervollständigung von jQuery auf relativ einfache Art und Weise:

$(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? Im Grunde bin ich auf der Suche nach einem Hybrid aus Autocomplete und Select/Drop-Down-Element.

Danke!

Answer 1

Ich kann eine offensichtliche Art und Weise zu tun, dass in der Dokumentation nicht sehen, aber Sie versuchen, den Fokus Triggerung (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

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

Answer 3

du auslösen können Ereignis, um alle Optionen anzuzeigen:

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

Oder sehen Sie sich das Beispiel in der Verbindung unten. Sieht genau so aus, wie du es machen willst.

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

EDIT (von @cnanney)

Hinweis: Sie müssen minLength eingestellt: 0 in Ihrem Autovervollständigung für eine leere Suchzeichenfolge alle Elemente zurückzukehren.

Answer 4

Ich konnte den $("#example").autocomplete("search", ""); Teil nicht funktionieren, nur wenn ich meine Suche mit einem Zeichen änderte, das in meiner Quelle existiert, funktioniert es. Also habe ich dann z.B. $("#example").autocomplete("search", "a");.

Answer 5

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 hat eine Weile gedauert, bis ich es herausgefunden hatte.

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

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

Answer 6

versuchen, dieses:

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

und minLength Set

funktioniert jedes Mal :)

Answer 7

Sie können diese verwenden:

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

Answer 8

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 9

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

Lösung aus: Display jquery ui auto-complete list on focus event

Die Lösung es mehr 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 11

ich diese gefunden funktioniert am besten zu arbeiten

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 12

Ich denke, eine bessere Option ist $ ("# idName") setzen die automatische Vervollständigung ("Suche", ""); in den Onclick-Parameter des Textfelds. Da bei Auswahl ein Fokus von jQuery eingegeben wird, kann dies ein Workaround sein. Ich weiß nicht, ob es eine akzeptable Lösung sein sollte.

Answer 13

Um alle Elemente anzuzeigen/Combobox-Verhalten zu simulieren, sollten Sie zuerst sicherstellen, dass Sie die Option minLength auf 0 gesetzt haben (Standard ist 1). Dann können Sie das click-Ereignis binden, um eine Suche mit der leeren Zeichenfolge durchzuführen.

Answer 14

Ich habe alle Antworten gesehen, 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", " "); }); 

das funktioniert gut in Firefox, IE, Chrome ...

Answer 15

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> 

Dies eröffnet die Autocomplete-ddl-Liste im Fokus (Auch wenn Sie Standard-Text in Ihrem Eingabefeld haben wie ich oben).

Der Text im Textfeld wird automatisch ausgewählt, damit der Benutzer den Text nicht löschen muss.

Sobald ein Element aus der Liste zur automatischen Vervollständigung ausgewählt wurde, wird dieses Element in das Eingabefeld zum automatischen Vervollständigen verschoben und der Fokus wird auf ein anderes Steuerelement verschoben (wodurch verhindert wird, dass die automatische Vervollständigung wieder geöffnet wird).

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

Answer 16

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 17

$("#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 18

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

ich auf diese Weise verwendet:

$("#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 20

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