jQuery autoComplete visualizza tutto fare clic su?

Question

Sto usando jQuery e del completamento automatico in un modo relativamente semplice:

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

Come faccio ad aggiungere un evento onclick (come un pulsante o un link) per visualizzare tutte le opzioni disponibili per il completamento automatico?Fondamentalmente sto cercando di fare un ibrido di completamento automatico e selezionare un/a discesa elemento.

Grazie!

Answer 1

Non riesco a vedere un modo ovvio di farlo nella documentazione, ma si tenta innescare la messa a fuoco (o click) evento sul completamento automatico abilitato testo:

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

Answer 2

È possibile attivare questo evento per mostrare tutte le opzioni:

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

O vedere l'esempio nel link qui sotto. Sembra esattamente quello che si vuole fare.

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

Modifica (da @cnanney)

Nota: È necessario impostare minLength: 0 nel completamento automatico per una stringa di ricerca vuota di restituire tutti gli elementi

.

Answer 3

Ho trovato questo per funzionare al meglio

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

Si cerca le etichette e colloca il valore nell'elemento $ (# esempio)

Answer 4

Al fine di mostrare tutti gli elementi / simulare il comportamento combobox, si deve prima assicurarsi di aver impostato l'opzione minLength a 0 (di default è 1). Quindi è possibile associare l'evento click per eseguire una ricerca con la stringa vuota.

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

Answer 5

soluzione: Display jquery ui elenco di completamento automatico su focus evento

La soluzione per far funzionare più di una volta

<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

provare questo:

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

e minLength è impostato su 0

funziona ogni volta:)

Answer 7

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

Answer 8

deve minLength impostato su a zero al fine di fare questo lavoro! Ecco l'esempio di lavoro.

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

Answer 9

questa è l'unica cosa che funziona per me. Lista mostra ogni volta e chiude su selezione:

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

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

Answer 10

è possibile utilizzare questo:

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

Answer 11

Questa mostra tutte le opzioni: "%" (vedi sotto)

La cosa importante è che bisogna posizionarlo sotto la dichiarazione #Esempio precedente, come nell'esempio qui sotto. Questo mi ha portato un po 'per capire.

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

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

Answer 12

speranza che questo aiuta qualcuno:

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

Ho risolto questo utilizzando attribuire minChars: 0 e dopo, innescare due click. (Completamento automatico mostra dopo il 1 click su ingresso) il mio codice

<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

Ho visto tutte le risposte che sembrano essere completa.

Se si desidera ottenere la lista quando il cursore si trova nel campo di testo o quando si fa clic sull'etichetta di corrispondenza, ecco come si può fare:

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

questo funziona bene 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

non ho potuto ottenere la parte $("#example").autocomplete( "search", "" ); al lavoro, solo una volta ho cambiato la mia ricerca con un personaggio che esiste nella mia fonte funzionare. Così ho quindi utilizzato per esempio $("#example").autocomplete( "search", "a" );.

Answer 18

Credo che una scelta migliore è quella di mettere $ ( "# idName") autocomplete ( "ricerca", ""); nella paramter onclick della casella di testo. Dal momento che su di selezione, una messa a fuoco è da parte jQuery, questo può essere una soluzione. Non so se dovrebbe essere una soluzione accettabile.

Answer 19

ho bisogno di fare questo di recente e dopo aver provato un paio di permutazioni differenti (usando onfocus, onclick di testo, ecc), ho infine optato per questo ...

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

Questo apre l'elenco di completamento automatico ddl sulla messa a fuoco (Anche se si dispone di testo predefinito nella tua casella di input come faccio io qui sopra).

E 'anche auto-seleziona il testo nella casella di testo per evitare all'utente di dover cancellare il testo.

Una volta che un elemento è selezionato dall'elenco di completamento automatico, si applica una voce nella casella di input completamento automatico e sposta l'attivo a un altro controllo (impedendo così il completamento automatico di riaprire).

Ho intenzione di sostituirlo con l'aggiunta dinamica Ajax chiamate al molto bello Chosen elenchi di selezione con la ghiaccio di fusione aggiornamento quando ho avere una possibilità.

Answer 20

ho usato in questo modo:

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

Poi

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

È inoltre possibile utilizzare la funzione di ricerca senza parametri:

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