jQuery UI API - Widget de Autocompletar (Autocomplete Widget)

Nota: cuando el menú de sugerencias está abierto,appendTola opción no debe cambiarse.

Ejemplo de código:

Inicializar el autocomplete con laappendToopción especificada:

$( ".selector" ).autocomplete({ appendTo: "#someElem" });
    

Después de la inicialización, obtener o establecer laappendToopción:

// getter
var appendTo = $( ".selector" ).autocomplete( "option", "appendTo" );
 
// setter
$( ".selector" ).autocomplete( "option", "appendTo", "#someElem" );
    

Ejemplo de código:

Inicializar el autocomplete con laautoFocusopción especificada:

$( ".selector" ).autocomplete({ autoFocus: true });
    

Después de la inicialización, obtener o establecer laautoFocusopción:

// getter
var autoFocus = $( ".selector" ).autocomplete( "option", "autoFocus" );
 
// setter
$( ".selector" ).autocomplete( "option", "autoFocus", true );
    

Ejemplo de código:

Inicializar el autocomplete con ladelayopción especificada:

$( ".selector" ).autocomplete({ delay: 500 });
    

Después de la inicialización, obtener o establecer ladelayopción:

// getter
var delay = $( ".selector" ).autocomplete( "option", "delay" );
 
// setter
$( ".selector" ).autocomplete( "option", "delay", 500 );
    

Ejemplo de código:

Inicializar el autocomplete con ladisabledopción especificada:

$( ".selector" ).autocomplete({ disabled: true });
    

Después de la inicialización, obtener o establecer ladisabledopción:

// getter
var disabled = $( ".selector" ).autocomplete( "option", "disabled" );
 
// setter
$( ".selector" ).autocomplete( "option", "disabled", true );
    

Ejemplo de código:

Inicializar el autocomplete con laminLengthopción especificada:

$( ".selector" ).autocomplete({ minLength: 0 });
    

Después de la inicialización, obtener o establecer laminLengthopción:

// getter
var minLength = $( ".selector" ).autocomplete( "option", "minLength" );
 
// setter
$( ".selector" ).autocomplete( "option", "minLength", 0 );
    

Ejemplo de código:

Inicializar el autocomplete con lapositionopción especificada:

$( ".selector" ).autocomplete({ position: { my : "right top", at: "right bottom" } });
    

Después de la inicialización, obtener o establecer lapositionopción:

// getter
var position = $( ".selector" ).autocomplete( "option", "position" );
 
// setter
$( ".selector" ).autocomplete( "option", "position", { my : "right top", at: "right bottom" } );
    

Independientemente de la variable que utilice, la etiqueta siempre se trata como texto. Si desea que la etiqueta se trate como html, puede usarla extensión html de Scott González. La demostración se centra ensourcelas diferentes variantes de la opción: puede encontrar la que coincida con su caso de uso y ver el código correspondiente.

Se admiten varios tipos:

• Array: un array que se puede usar para datos locales. Se admiten dos formatos:
  • Array de cadenas:[ "Choice1", "Choice2" ]
  • Un array de objetos conlabelyvaluelas propiedades:[ { label: "Choice1", value: "value1" }, ... ]
  La propiedad label se muestra en el menú de sugerencias. Cuando el usuario selecciona una entrada, el valor (value) se inserta en el elemento input. Si solo se especifica una propiedad, dicha propiedad se tratará como label y value, por ejemplo, si solo proporcionavaluela propiedad, el value también se tratará como etiqueta (label).
• String: cuando se usa una cadena, el plugin Autocomplete espera que la cadena apunte a un recurso URL que devuelva datos JSON. Puede estar en el mismo host o en un host diferente (debe proporcionar JSONP). El plugin Autocomplete no filtra los resultados, sino que añade una cadena de consulta a través de untermcampo para que el script del lado del servidor filtre los resultados. Por ejemplo, si lasourceopción se establece en"http://example.com"search.php, y el usuario escribefooabc, la solicitud GET seráhttp://example.com?term=foosearch.php?term=abc. El formato de los datos en sí puede ser el mismo que el de los datos locales descritos anteriormente.
• Function: la tercera variante, una función de callback, ofrece la máxima flexibilidad y puede usarse para conectar cualquier fuente de datos a Autocomplete. La función de callback acepta dos argumentos:
  • unrequestobjeto, con unatermpropiedad, que representa el valor de la entrada de texto actual. Por ejemplo, si el usuario escribe en el campo city"new yo", entonces Autocomplete term es equivalente a"new yo"。
  • unresponsefunción de callback que proporciona un único parámetro: los datos sugeridos al usuario. Estos datos deben filtrarse según el term proporcionado, y pueden estar en cualquiera de los formatos de datos locales descritos anteriormente. Se utiliza para proporcionar un callback de source personalizado durante la solicitud para manejar errores. Incluso si se encuentra un error, debe llamar a laresponsefunción de callback. Esto asegura que el widget esté siempre en el estado correcto.

  Al filtrar datos locales, puede usar la$.ui.autocomplete.escapeRegexfunción incorporada. Acepta un parámetro de cadena, escapa todos los caracteres de expresión regular, lo que permite pasar el resultado de forma segura anew RegExp()。

Ejemplo de código:

Inicialice el autocomplete con lassourceopciones especificadas:

$( ".selector" ).autocomplete({ source: [ "c++", "java", "php", "coldfusion", "javascript", "asp", "ruby" ] });
    

Después de la inicialización, obtener o establecersourcela opción:

// getter
var source = $( ".selector" ).autocomplete( "option", "source" );
 
// setter
$( ".selector" ).autocomplete( "option", "source", [ "c++", "java", "php", "coldfusion", "javascript", "asp", "ruby" ] );
    

• Este método no acepta ningún parámetro.

Ejemplo de código:

Llamar al método close:

$( ".selector" ).autocomplete( "close" );
    

• Este método no acepta ningún parámetro.

Ejemplo de código:

Llamar al método destroy:

$( ".selector" ).autocomplete( "destroy" );
    

• Este método no acepta ningún parámetro.

Ejemplo de código:

Llamar al método disable:

$( ".selector" ).autocomplete( "disable" );
    

• Este método no acepta ningún parámetro.

Ejemplo de código:

Llamar al método enable:

$( ".selector" ).autocomplete( "enable" );
    

• optionName
  Tipo: String
  Descripción: el nombre de la opción a obtener.

Ejemplo de código:

Llamar a este método:

var isDisabled = $( ".selector" ).autocomplete( "option", "disabled" );
    

• Este método no acepta ningún parámetro.

Ejemplo de código:

Llamar a este método:

var options = $( ".selector" ).autocomplete( "option" );
    

• optionName
  Tipo: String
  Descripción: el nombre de la opción a establecer.
• value
  Tipo: Object
  Descripción: el valor a establecer para la opción.

Ejemplo de código:

Llamar a este método:

$( ".selector" ).autocomplete( "option", "disabled", true );
    

• options
  Tipo: Object
  Descripción: los pares option-value a establecer.

Ejemplo de código:

Llamar a este método:

$( ".selector" ).autocomplete( "option", { disabled: true } );
    

• value
  Tipo: String

Ejemplo de código:

Llamar al método search:

$( ".selector" ).autocomplete( "search", "" );
    

• Este método no acepta ningún parámetro.

Ejemplo de código:

Llamar al método widget:

$( ".selector" ).autocomplete( "widget" );
    

Note: At this time the<ul> element created must contain an <a> element for compatibility with the menu widget. See the example below.

• ul
  Tipo: jQuery
  Descripción: el nuevo<li>elemento al que debe agregarse el<ul>elemento.
• item
  Tipo: Object
  
  • label
    Tipo: String
    Descripción: la cadena que se muestra para la entrada.
  • item
    Tipo: String
    Descripción: el valor que se inserta en el campo de entrada cuando se selecciona la entrada.

Ejemplo de código:

Agregar el valor del elemento como<li>un atributo data en el elemento.

_renderItem: function( ul, item ) {
  return $( "<li>" )
    .attr( "data-value", item.value )
    .append( $( "<a>" ).text( item.label ) )
    .appendTo( ul );
}
    

• ul
  Tipo: jQuery
  Descripción: un<ul>elemento vacío que se usará como menú del widget.
• items
  Tipo: Array
  Descripción: un array cuyos elementos son las entradas que coinciden con la entrada del usuario. Cada entrada es un objeto con laslabelyvaluepropiedades `label` y `value`.

Ejemplo de código:

Agregar un nombre de clase CSS a los elementos del menú antiguos.

_renderMenu: function( ul, items ) {
  var that = this;
  $.each( items, function( index, item ) {
    that._renderItemData( ul, item );
  });
  $( ul ).find( "li:odd" ).addClass( "odd" );
}
    

• Este método no acepta ningún parámetro.

Ejemplo de código:

El menú siempre se muestra con 500 píxeles de ancho.

_resizeMenu: function() {
  this.menu.element.outerWidth( 500 );
}
    

• event
  Tipo: Event
• ui
  Tipo: Object
  • item
    Tipo: Object
    Descripción: el elemento seleccionado del menú, de lo contrario la propiedad esnull。

Ejemplo de código:

Inicialice el autocomplete con el callback `change` especificado:

$( ".selector" ).autocomplete({
  change: function( event, ui ) {}
});
    

Vincule un listener de eventos al evento `autocompletechange`:

$( ".selector" ).on( "autocompletechange", function( event, ui ) {} );
    

• event
  Tipo: Event
• ui
  Tipo: Object

Nota:uiEl objeto `ui` está vacío; se incluye aquí para mantener la coherencia con otros eventos.

Ejemplo de código:

Inicialice el autocomplete con el callback `close` especificado:

$( ".selector" ).autocomplete({
  close: function( event, ui ) {}
});
    

Vincule un listener de eventos al evento `autocompleteclose`:

$( ".selector" ).on( "autocompleteclose", function( event, ui ) {} );
    

• event
  Tipo: Event
• ui
  Tipo: Object

Nota:uiEl objeto `ui` está vacío; se incluye aquí para mantener la coherencia con otros eventos.

Ejemplo de código:

Inicialice el autocomplete con el callback `create` especificado:

$( ".selector" ).autocomplete({
  create: function( event, ui ) {}
});
    

Vincule un listener de eventos al evento `autocompletecreate`:

$( ".selector" ).on( "autocompletecreate", function( event, ui ) {} );
    

• event
  Tipo: Event
• ui
  Tipo: Object
  • item
    Tipo: Object
    Descripción: el elemento que recibió el foco.

Ejemplo de código:

Inicialice el autocomplete con el callback `focus` especificado:

$( ".selector" ).autocomplete({
  focus: function( event, ui ) {}
});
    

Vincule un listener de eventos al evento `autocompletefocus`:

$( ".selector" ).on( "autocompletefocus", function( event, ui ) {} );
    

• event
  Tipo: Event
• ui
  Tipo: Object

Nota:uiEl objeto `ui` está vacío; se incluye aquí para mantener la coherencia con otros eventos.

Ejemplo de código:

Inicialice el autocomplete con el callback `open` especificado:

$( ".selector" ).autocomplete({
  open: function( event, ui ) {}
});
    

Vincule un listener de eventos al evento `autocompleteopen`:

$( ".selector" ).on( "autocompleteopen", function( event, ui ) {} );
    

• event
  Tipo: Event
• ui
  Tipo: Object
  • content
    Tipo: Array
    Descripción: contiene los datos de respuesta y puede modificarse para cambiar los resultados mostrados. Estos datos ya están normalizados, así que si modifica los datos, asegúrese de que cada elemento contenga lasvalueylabelpropiedades `label` y `value`.

Ejemplo de código:

Inicializar el autocomplete con el callback response especificado:

$( ".selector" ).autocomplete({
  response: function( event, ui ) {}
});
    

Vincular un listener de eventos al evento autocompleteresponse:

$( ".selector" ).on( "autocompleteresponse", function( event, ui ) {} );
    

• event
  Tipo: Event
• ui
  Tipo: Object

Nota:uiEl objeto está vacío; se incluye aquí por consistencia con otros eventos.

Ejemplo de código:

Inicializar el autocomplete con el callback search especificado:

$( ".selector" ).autocomplete({
  search: function( event, ui ) {}
});
    

Vincular un listener de eventos al evento autocompletesearch:

$( ".selector" ).on( "autocompletesearch", function( event, ui ) {} );
    

• event
  Tipo: Event
• ui
  Tipo: Object
  • item
    Tipo: Object
    Descripción: un objeto con lalabelyvaluepropiedad del elemento seleccionado.

Ejemplo de código:

Inicializar el autocomplete con el callback select especificado:

$( ".selector" ).autocomplete({
  select: function( event, ui ) {}
});
    

Vincular un listener de eventos al evento autocompleteselect:

$( ".selector" ).on( "autocompleteselect", function( event, ui ) {} );