jQuery AutoComplete ver todo el clic?

Question

Estoy usando autocompletar de jQuery de una manera relativamente 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; }
    }
  );
  });

¿Cómo agrego un evento onclick (como un botón o un enlace) que mostrará todas las opciones disponibles para la función de autocompletar? Básicamente estoy buscando para hacer un híbrido de un autocompletar y un elemento de selección / desplegable.

Gracias!

Answer 1

No puedo ver una manera obvia de hacerlo en la documentación, pero se intenta desencadenar el foco (o clic) en el caso de autocompletar permitido cuadro de texto:

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

Answer 2

Puede activar este evento para mostrar todas las opciones:

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

O ver el ejemplo en el siguiente enlace. Parece exactamente lo que quiere hacer.

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

editar (de @cnanney)

Nota: Debe configurar minLength: 0 en su autocompletar para una cadena de búsqueda vacío para devolver todos los elementos

.

Answer 3

He encontrado que esto funcione mejor

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

Se busca en las etiquetas y sitúa el valor en el elemento $ (# ejemplo)

Answer 4

Con el fin de mostrar todos los elementos / simular el comportamiento del cuadro combinado, primero debe asegurarse de que ha configurado la opción minLength a 0 (por defecto es 1). A continuación, puede obligar a la evento de clic para realizar una búsqueda con la cadena vacía.

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

Answer 5

solución de: Pantalla de jQuery UI centrarse caso

La solución para hacer que funcione más de una vez

<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

intente lo siguiente:

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

y minLength se define en 0

funciona todo el tiempo:)

Answer 7

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

Answer 8

debe set minLength a cero con el fin de hacer este trabajo! Aquí está el ejemplo de trabajo.

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

Answer 9

este es el único que funciona para mí. Lista de muestra cada vez y se cierra sobre la selección:

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

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

Answer 10

puede utilizar esto:

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

Answer 11

Esto muestra todas las opciones: "%" (véase más adelante)

Lo importante es que usted tiene que colocarlo debajo de la declaración #example anterior, como en el siguiente ejemplo. Esto me tomó un tiempo para averiguar.

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

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

Answer 12

Esperamos que esto ayude a alguien:

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

He resuelto esto utilizando atribuir minChars: 0 y después, desencadenan dos clics. (Autocompletar muestra después de 1 clic en la entrada) mi código

<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

He visto todas las respuestas que parecen ser completa.

Si desea obtener la lista cuando el cursor está en el campo de texto o hace clic en la etiqueta correspondiente, aquí cómo se puede hacer:

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

esto funciona bien en 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

No pude conseguir la parte $("#example").autocomplete( "search", "" ); al trabajo, sólo una vez he cambiado de búsqueda con un personaje que existe en mi fuente que funcione. Así que luego se usa, por ejemplo, $("#example").autocomplete( "search", "a" );.

Answer 18

Creo que una mejor opción es poner $ ( "# idName") autocompletar ( "buscar", ""); en el parametro onclick del cuadro de texto. Desde el selecto, un foco se pone en por jQuery, esto puede ser una solución. No sé si debería ser una solución aceptable.

Answer 19

que tenía que hacer esto recientemente y después de probar un par de permutaciones diferentes (usando onfocus, onclick del cuadro de texto, etc.), finalmente me decidí por este ...

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

Esto abre la lista de autocompletar en ddl enfoque (Incluso si usted tiene texto predeterminado en el cuadro de entrada como yo arriba).

También auto-selecciona el texto en el cuadro de texto para evitar que el usuario tenga que limpiar el texto.

Una vez que se selecciona un elemento de la lista de auto-completar, se pone ese elemento en el cuadro de entrada de autocompletar y mueve el foco a otro control (lo que impide la función de autocompletar de reapertura).

Mi plan sustituyéndola por la adición dinámica de llamadas Ajax a la muy agradable Elegido listas de selección con el el deshielo actualicen cuando la oportunidad.

Answer 20

He utilizado de esta manera:

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

Entonces

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

También puede utilizar la función de búsqueda sin parámetros:

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