JqueryUI - Autocompletar

La finalización automática es un mecanismo que se utiliza con frecuencia en los sitios web modernos para proporcionar al usuario una lista de sugerencias para el comienzo de la palabra, que ha escrito en un cuadro de texto. A continuación, el usuario puede seleccionar un elemento de la lista, que se mostrará en el campo de entrada. Esta función evita que el usuario tenga que ingresar una palabra completa o un conjunto de palabras.

JQueryUI proporciona un widget de autocompletar, un control que actúa como un menú desplegable <select>, pero filtra las opciones para presentar solo aquellas que coinciden con lo que el usuario está escribiendo en un control. jQueryUI proporciona laautocomplete() método para crear una lista de sugerencias debajo del campo de entrada y agrega nuevas clases CSS a los elementos en cuestión para darles el estilo apropiado.

Cualquier campo que pueda recibir entrada se puede convertir en un Autocompletar, es decir, elementos <input> , elementos <textarea> y elementos con el atributo contenteditable .

Sintaxis

los autocomplete() El método se puede utilizar de dos formas:

$ (selector, contexto) .autocomplete (opciones) Método
$ (selector, context) .autocomplete ("action", params) Método

$ (selector, contexto) .autocomplete (opciones) Método

El método autocompletar (opciones) declara que un elemento HTML <input> debe administrarse como un campo de entrada que se mostrará encima de una lista de sugerencias. El parámetro de opciones es un objeto que especifica el comportamiento de la lista de sugerencias cuando el usuario está escribiendo en el campo de entrada.

Sintaxis

$(selector, context).autocomplete (options);

Puede proporcionar una o más opciones a la vez utilizando el objeto Javascript. Si hay más de una opción para proporcionar, las separará con una coma de la siguiente manera:

$(selector, context).autocomplete({option1: value1, option2: value2..... });

La siguiente tabla enumera las diferentes opciones que se pueden utilizar con este método:


$( ".selector" ).autocomplete({ appendTo: "#identifier" });
$( ".selector" ).autocomplete({ autoFocus: true });
$( ".selector" ).autocomplete({ delay: 500 });
$( ".selector" ).autocomplete({ disabled: true });
$( ".selector" ).autocomplete({ minLength: 0 });
$( ".selector" ).autocomplete({ position: { my : "right top", at: "right bottom" } });
$( ".selector" ).autocomplete({ source: [ "c++", "java", "php", "coldfusion", "javascript", "asp", "ruby" ] });

No Señor.	Opción y descripción
1	appendTo Esta opción se usa para agregar un elemento al menú. Por defecto su valor esnull. Option - appendTo Esta opción se usa para agregar un elemento al menú. Por defecto su valor esnull. Cuando el valor es nulo, los padres del campo de entrada se comprobarán para una clase de ui-front . Si se encuentra un elemento con la clase ui-front , el menú se agregará a ese elemento. Syntax `$( ".selector" ).autocomplete({ appendTo: "#identifier" });`
2	autoenfoque Esta opción cuando se establece en verdadera , el primer elemento del menú se enfocará automáticamente cuando se muestre el menú. Por defecto su valor esfalse. Option - autoFocus Esta opción cuando se establece en verdadera , el primer elemento del menú se enfocará automáticamente cuando se muestre el menú. Por defecto su valor esfalse. Syntax `$( ".selector" ).autocomplete({ autoFocus: true });`
3	retrasar Esta opción es un número entero que representa el número de milisegundos que se deben esperar antes de intentar obtener los valores coincidentes (como se especifica en la opción fuente ). Esto puede ayudar a reducir la paliza cuando se obtienen datos no locales al darle tiempo al usuario para ingresar más caracteres antes de que se inicie la búsqueda. Por defecto su valor es300. Option - delay Esta opción es un número entero que representa el número de milisegundos que se deben esperar antes de intentar obtener los valores coincidentes (como se especifica en la opción fuente ). Esto puede ayudar a reducir la paliza cuando se obtienen datos no locales al darle tiempo al usuario para ingresar más caracteres antes de que se inicie la búsqueda. Por defecto su valor es300. Syntax `$( ".selector" ).autocomplete({ delay: 500 });`
4	discapacitado Esta opción, si se especifica y es verdadera , el widget de autocompletar está inicialmente deshabilitado. Por defecto su valor esfalse. Option - disabled Esta opción, si se especifica y es verdadera , el widget de autocompletar está inicialmente deshabilitado. Por defecto su valor esfalse. Syntax `$( ".selector" ).autocomplete({ disabled: true });`
5	longitud mínima El número de caracteres que se deben ingresar antes de intentar obtener los valores coincidentes (como se especifica en la opción fuente). Esto puede evitar que se presente un conjunto de valores demasiado grande cuando unos pocos caracteres no son suficientes para reducir el conjunto a un nivel razonable. Por defecto su valor es1. Option - minLength El número de caracteres que se deben ingresar antes de intentar obtener los valores coincidentes (como se especifica en la opción fuente). Esto puede evitar que se presente un conjunto de valores demasiado grande cuando unos pocos caracteres no son suficientes para reducir el conjunto a un nivel razonable. Por defecto su valor es1. Syntax `$( ".selector" ).autocomplete({ minLength: 0 });`
6	posición Esta opción identifica la posición del menú de sugerencias en relación con el elemento de entrada asociado. La opción of toma como valor predeterminado el elemento de entrada, pero puede especificar otro elemento contra el que posicionarse. Por defecto su valor es{ my: "left top", at: "left bottom", collision: "none" }. Option - position Esta opción identifica la posición del menú de sugerencias en relación con el elemento de entrada asociado. La opción of toma como valor predeterminado el elemento de entrada, pero puede especificar otro elemento contra el que posicionarse. Por defecto su valor es{ my: "left top", at: "left bottom", collision: "none" }. Syntax `$( ".selector" ).autocomplete({ position: { my : "right top", at: "right bottom" } });`
7	fuente Esta opción especifica la forma en que se obtienen los datos que coinciden con los datos de entrada. Se debe proporcionar un valor o no se creará el widget de autocompletar. Por defecto su valor esnone; must be specified. Option - source Esta opción especifica la forma en que se obtienen los datos que coinciden con los datos de entrada. Se debe proporcionar un valor o no se creará el widget de autocompletar. Este valor puede ser un: String que representa la URL de un recurso del servidor que devolverá datos coincidentes, an array de datos locales con los que se comparará el valor, o a function que sirve como una devolución de llamada general al proporcionar los valores coincidentes. Syntax `$( ".selector" ).autocomplete({ source: [ "c++", "java", "php", "coldfusion", "javascript", "asp", "ruby" ] });`

La siguiente sección le mostrará algunos ejemplos prácticos de la funcionalidad de widget de autocompletar.

Funcionalidad predeterminada

El siguiente ejemplo muestra un ejemplo simple de funcionalidad de widget de autocompletar, sin pasar parámetros al autocomplete() método.

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Autocomplete functionality</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      
      <!-- Javascript -->
      <script>
         $(function() { var availableTutorials = [ "ActionScript", "Bootstrap", "C", "C++", ]; $( "#automplete-1" ).autocomplete({
               source: availableTutorials
            });
         });
      </script>
   </head>
   
   <body>
      <!-- HTML --> 
      <div class = "ui-widget">
         <p>Type "a" or "s"</p>
         <label for = "automplete-1">Tags: </label>
         <input id = "automplete-1">
      </div>
   </body>
</html>

Guardemos el código anterior en un archivo HTML autocompleteexample.htmy ábralo en un navegador estándar que admita javascript, debería ver el siguiente resultado. Ahora puedes jugar con el resultado:

Uso de autoenfoque

El siguiente ejemplo demuestra el uso de la opción autoFocus en el widget de autocompletar de JqueryUI.

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Autocomplete functionality</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      
      <!-- Javascript -->
      <script>
         $(function() { var availableTutorials = [ "ActionScript", "Bootstrap", "C", "C++", ]; $( "#automplete-2" ).autocomplete({
               source: availableTutorials,
               autoFocus:true
            });
         });
      </script>
   </head>
   
   <body>
      <!-- HTML --> 
      <div class = "ui-widget">
         <p>Type "a" or "s"</p>
         <label for = "automplete-2">Tags: </label>
         <input id = "automplete-2">
      </div>
   </body>
</html>

Guardemos el código anterior en un archivo HTML autocompleteexample.htmy ábralo en un navegador estándar que admita javascript, también debe ver el siguiente resultado. Ahora puedes jugar con el resultado:

Uso de minLength y delay

El siguiente ejemplo demuestra el uso de dos opciones minLength y delay en el widget de autocompletar de JqueryUI.

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Autocomplete functionality</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      
      <!-- Javascript -->
      <script>
         $(function() { var availableTutorials = [ "ActionScript", "Bootstrap", "C", "C++", "Ecommerce", "Jquery", "Groovy", "Java", "JavaScript", "Lua", "Perl", "Ruby", "Scala", "Swing", "XHTML" ]; $( "#automplete-3" ).autocomplete({
               minLength:2,   
               delay:500,   
               source: availableTutorials
            });
         });
      </script>
   </head>
   
   <body>
      <!-- HTML --> 
      <div class = "ui-widget">
         <p>Type two letter for e.g:ja,sc etc</p>
         <label for = "automplete-3">Tags: </label>
         <input id = "automplete-3">
      </div>
   </body>
</html>

Uso de etiqueta

El siguiente ejemplo demuestra el uso de la opción label en el widget de autocompletar de JqueryUI.

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Autocomplete functionality</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      
      <!-- Javascript -->
      <script>
         $(function() { $( "#autocomplete-4" ).autocomplete({
               source: [
                  { label: "India", value: "IND" },
                  { label: "Australia", value: "AUS" }
               ]
            });
         });
      </script>
   </head>
   
   <body>
      <!-- HTML --> 
      <div class = "ui-widget">
         <p>Type I OR A</p>
         <input id = "autocomplete-4">
      </div>
   </body>
</html>

Uso de fuente externa

El siguiente ejemplo demuestra el uso de un archivo externo para source opción en el widget de autocompletar de JqueryUI.

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Autocomplete functionality</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      
      <!-- Javascript -->
      <script>
         $(function() { $( "#autocomplete-5" ).autocomplete({
               source: "/jqueryui/search.php",
               minLength: 2
            });
         });
      </script> 
   </head>
   
   <body>
      <input id = "autocomplete-5">
   </body>
</html>

El archivo search.php se coloca en la misma ubicación que el archivo anterior (autocompleteexample.html). El contenido de search.php es el siguiente:

<?
$term = $_GET[ "term" ];
$companies = array( array( "label" => "JAVA", "value" => "1" ), array( "label" => "DATA IMAGE PROCESSING", "value" => "2" ), array( "label" => "JAVASCRIPT", "value" => "3" ), array( "label" => "DATA MANAGEMENT SYSTEM", "value" => "4" ), array( "label" => "COMPUTER PROGRAMMING", "value" => "5" ), array( "label" => "SOFTWARE DEVELOPMENT LIFE CYCLE", "value" => "6" ), array( "label" => "LEARN COMPUTER FUNDAMENTALS", "value" => "7" ), array( "label" => "IMAGE PROCESSING USING JAVA", "value" => "8" ), array( "label" => "CLOUD COMPUTING", "value" => "9" ), array( "label" => "DATA MINING", "value" => "10" ), array( "label" => "DATA WAREHOUSE", "value" => "11" ), array( "label" => "E-COMMERCE", "value" => "12" ), array( "label" => "DBMS", "value" => "13" ), array( "label" => "HTTP", "value" => "14" ) ); $result = array();
foreach ($companies as $company) {
   $companyLabel = $company[ "label" ];
   if ( strpos( strtoupper($companyLabel), strtoupper($term) )!== false ) {
      array_push( $result, $company );
   }
}

echo json_encode( $result );
?>

Escriba palabras de dos letras para, por ejemplo: ja, sc, etc.

$ (selector, context) .autocomplete ("action", params) Método

El método autocompletar ("acción", params) puede realizar una acción en la lista de sugerencias, como mostrar u ocultar. La acción se especifica como una Cadena en el primer argumento (por ejemplo, "cerrar" para ocultar la lista). Consulte las acciones que se pueden aprobar en la siguiente tabla.

Sintaxis

$(selector, context).autocomplete ("action", params);;

La siguiente tabla enumera las diferentes acciones que se pueden utilizar con este método:


$( ".selector" ).autocomplete("close");
$( ".selector" ).autocomplete("destroy");
$( ".selector" ).autocomplete("disable");
$( ".selector" ).autocomplete("enable");
var isDisabled = $( ".selector" ).autocomplete( "option", "disabled" );
var options = $( ".selector" ).autocomplete( "option" );
$( ".selector" ).autocomplete( "option", "disabled", true );
$( ".selector" ).autocomplete( "option", { disabled: true } );
$( ".selector" ).autocomplete( "search", "" );
$( ".selector" ).autocomplete("widget");

No Señor.	Acción Descripción
1	cerca Esta acción oculta la lista de sugerencias en el menú Autocompletar. Este método no acepta argumentos. Action - close Esta acción oculta la lista de sugerencias en el menú Autocompletar. Este método no acepta argumentos. Syntax `$( ".selector" ).autocomplete("close");`
2	destruir Esta acción elimina la función de autocompletar. Se eliminan las listas de sugerencias. Este método no acepta argumentos. Action - destroy Esta acción elimina la función de autocompletar. Se eliminan las listas de sugerencias. Este método no acepta argumentos. Syntax `$( ".selector" ).autocomplete("destroy");`
3	inhabilitar Esta acción desactiva el mecanismo de autocompletado. La lista de sugerencias ya no aparece. Este método no acepta argumentos. Action - disable Esta acción desactiva el mecanismo de autocompletado. La lista de sugerencias ya no aparece. Este método no acepta argumentos. Syntax `$( ".selector" ).autocomplete("disable");`
4	habilitar Esta acción reactiva el mecanismo de autocompletado. Se volverá a mostrar la lista de sugerencias. Este método no acepta argumentos. Action - enable Esta acción reactiva el mecanismo de autocompletado. Se volverá a mostrar la lista de sugerencias. Este método no acepta argumentos. Syntax `$( ".selector" ).autocomplete("enable");`
5	opción (optionName) Esta acción recupera el valor del parámetro optionName especificado . Esta opción corresponde a una de las utilizadas con autocompletar (opciones). Action - option( optionName ) Esta acción recupera el valor del parámetro optionName especificado . Esta opción corresponde a una de las utilizadas con autocompletar (opciones). Syntax `var isDisabled = $( ".selector" ).autocomplete( "option", "disabled" );`
6	opción Esta acción obtiene un objeto que contiene pares clave / valor que representan el hash de opciones de autocompletar actual. Action - option Esta acción obtiene un objeto que contiene pares clave / valor que representan el hash de opciones de autocompletar actual. Syntax `var options = $( ".selector" ).autocomplete( "option" );`
7	opción (optionName, valor) Esta acción establece el valor de la opción de autocompletar asociada con el optionName especificado . El argumento optionName es el nombre de la opción que se va a establecer y value es el valor que se va a establecer para la opción. Action - option( optionName, value ) Esta acción establece el valor de la opción de autocompletar asociada con el optionName especificado . El argumento optionName es el nombre de la opción que se va a establecer y value es el valor que se va a establecer para la opción. Syntax `$( ".selector" ).autocomplete( "option", "disabled", true );`
8	opción (opciones) Esta acción establece una o más opciones para el autocompletado. Las opciones de argumento es un mapa de pares de valores de opción que se establecerán. Action - option( options ) Esta acción establece una o más opciones para el autocompletado. Las opciones de argumento es un mapa de pares de valores de opción que se establecerán. Syntax `$( ".selector" ).autocomplete( "option", { disabled: true } );`
9	búsqueda ([valor]) Esta acción busca la correspondencia entre el valor de la cadena y la fuente de datos (especificada en options.source ). Se debe alcanzar el número mínimo de caracteres (indicado en options.minLength ) en valor, de lo contrario no se realiza la búsqueda. Action - search( [value ] ) Esta acción busca la correspondencia entre el valor de la cadena y la fuente de datos (especificada en options.source ). Se debe alcanzar el número mínimo de caracteres (indicado en options.minLength ) en valor, de lo contrario no se realiza la búsqueda. Syntax `$( ".selector" ).autocomplete( "search", "" );`
10	widget Recupere el elemento DOM <ul> correspondiente a la lista de sugerencias. Este es un objeto de la clase jQuery que permite un fácil acceso a la lista sin usar selectores de jQuery. Action - widget Recupere el elemento DOM <ul> correspondiente a la lista de sugerencias. Este es un objeto de la clase jQuery que permite un fácil acceso a la lista sin usar selectores de jQuery. Syntax `$( ".selector" ).autocomplete("widget");`

Ejemplo

Ahora veamos un ejemplo usando las acciones de la tabla anterior. El siguiente ejemplo demuestra el uso del método option (optionName, value) .

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Autocomplete functionality</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      
      <!-- Javascript -->
      <script>
         $(function() {
            var availableTutorials = [
               "ActionScript",
               "Bootstrap",
               "C",
               "C++",
               "Ecommerce",
               "Jquery",
               "Groovy",
               "Java",
               "JavaScript",
               "Lua",
               "Perl",
               "Ruby",
               "Scala",
               "Swing",
               "XHTML"	
            ];
            $( "#automplete-6" ).autocomplete({ source: availableTutorials }); $( "#automplete-6" ).autocomplete("option", "position",
               { my : "right-10 top+10", at: "right top" }) 
         });
      </script>
   </head>
   
   <body>
      <!-- HTML --> 
      <div class = "ui-widget">
         <p>Type "a" or "s"</p>
         <label for = "automplete-6">Tags: </label>
         <input id = "automplete-6">
      </div>
   </body>
</html>

Guardemos el código anterior en un archivo HTML autocompleteexample.htm y ábralo en un navegador estándar que admita javascript, también debe ver el siguiente resultado:

Puntos de extensión

El widget de autocompletar se puede ampliar a medida que se construye con la fábrica de widgets. Al extender widgets, tiene la capacidad de anular o agregar al comportamiento de métodos existentes. La siguiente tabla enumera los métodos que actúan como puntos de extensión con la misma estabilidad de API que los métodos de complemento enumerados anteriormente .

No Señor.	Método y descripción
1	_renderItem (ul, elemento) Este método controla la creación de cada opción en el menú del widget. Este método crea un nuevo elemento <li>, lo agrega al menú y lo devuelve. _renderItem( ul, item ) Este método controla la creación de cada opción en el menú del widget. Este método crea un nuevo elemento <li>, lo agrega al menú y lo devuelve. Donde - <ul> es el elemento que se debe agregar al elemento <li> recién creado. item puede ser una etiqueta (Cadena) , la cadena que se mostrará para el elemento, o un valor (Cadena) , el valor que se insertará en la entrada cuando se seleccione el elemento.
2	_renderMenu (ul, elementos) Este método controla la construcción del menú del widget. _renderMenu( ul, items ) Este método controla la construcción del menú del widget. Donde - <ul>es una matriz de elementos que coinciden con el término escrito por el usuario. Cada artículo es un objeto con propiedades de etiqueta y valor .
3	_resizeMenu () Este método controla el tamaño del menú antes de que se muestre. El elemento de menú está disponible en este elemento de menú . Este método no acepta argumentos. _resizeMenu() Este método controla el tamaño del menú antes de que se muestre. El elemento de menú está disponible en este elemento de menú . Este método no acepta argumentos.

Gestión de eventos en elementos de autocompletar

Además del método de autocompletar (opciones) que vimos en las secciones anteriores, JqueryUI proporciona métodos de eventos que se activan para un evento en particular. Estos métodos de eventos se enumeran a continuación:


$( ".selector" ).autocomplete({
   change: function( event, ui ) {}
});
$( ".selector" ).autocomplete({
   close: function( event, ui ) {}
});
$( ".selector" ).autocomplete({
   create: function( event, ui ) {}
});
$( ".selector" ).autocomplete({
   focus: function( event, ui ) {}
});
$( ".selector" ).autocomplete({
   open: function( event, ui ) {}
});
$( ".selector" ).autocomplete({
   response: function( event, ui ) {}
});
$( ".selector" ).autocomplete({
   search: function( event, ui ) {}
});
$( ".selector" ).autocomplete({
   select: function( event, ui ) {}
});

No Señor.	Método y descripción del evento
1	cambiar (evento, ui) Este evento se activa cuando el valor del elemento <input> se cambia en función de una selección. Cuando se activa, este evento siempre se producirá después de que se active el evento de cierre . Event - change(event, ui) Este evento se activa cuando el valor del elemento <input> se cambia según una selección. Cuando se activa, este evento siempre se producirá después de que se active el evento de cierre . Donde evento es de tipo Evento y ui es de tipo Objeto . Los posibles valores de ui son: item- El elemento seleccionado en el menú, si lo hubiera. De lo contrario, la propiedad es nula. Syntax `$( ".selector" ).autocomplete({ change: function( event, ui ) {} });`
2	cerrar (evento, ui) Este evento se activa cada vez que se cierra el menú de autocompletar. Event - close(event, ui) Este evento se activa cada vez que se cierra el menú de autocompletar. Donde evento es de tipo Evento y ui es de tipo Objeto . Syntax `$( ".selector" ).autocomplete({ close: function( event, ui ) {} });`
3	crear (evento, ui) Este evento se activa cuando se crea el autocompletado. Event - create(event, ui) Este evento se activa cuando se crea el autocompletado. Donde el evento es de tipo Evento y la interfaz de usuario es de tipo Objeto . Los posibles valores de ui son: item- El elemento seleccionado en el menú, si lo hubiera. De lo contrario, la propiedad es nula. Syntax `$( ".selector" ).autocomplete({ create: function( event, ui ) {} });`
4	focus (evento, ui) Este evento se activa cada vez que una de las opciones del menú recibe el foco. A menos que se cancele (por ejemplo, devolviendo falso), el valor enfocado se establece en el elemento <input>. Event - focus(event, ui) Este evento se activa cada vez que una de las opciones del menú recibe el foco. A menos que se cancele (por ejemplo, devolviendo falso), el valor enfocado se establece en el elemento <input>. Donde evento es de tipo Evento y ui es de tipo Objeto . Los posibles valores de ui son: item - El elemento enfocado. Syntax `$( ".selector" ).autocomplete({ focus: function( event, ui ) {} });`
5	abierto (evento, ui) Este evento se activa después de que se hayan preparado los datos y el menú esté a punto de abrirse. Event - open(event, ui) Este evento se activa después de que se hayan preparado los datos y el menú esté a punto de abrirse. Donde evento es de tipo Evento y ui es de tipo Objeto . Syntax `$( ".selector" ).autocomplete({ open: function( event, ui ) {} });`
6	respuesta (evento, ui) Este evento se activa después de que se completa una búsqueda, antes de que se muestre el menú. Este evento siempre se activa cuando se completa una búsqueda, incluso si el menú no se mostrará porque no hay resultados o la función Autocompletar está desactivada. Event - response(event, ui) Este evento se activa después de que se completa una búsqueda, antes de que se muestre el menú. Este evento siempre se activa cuando se completa una búsqueda, incluso si el menú no se mostrará porque no hay resultados o la función Autocompletar está desactivada. Donde evento es de tipo Evento y ui es de tipo Objeto . Los posibles valores de ui son: content - Contiene los datos de respuesta y se puede modificar para cambiar los resultados que se mostrarán. Syntax `$( ".selector" ).autocomplete({ response: function( event, ui ) {} });`
7	buscar (evento, ui) Este evento se activa después de que se cumplen los criterios de demora y minLength , justo antes de que se active el mecanismo especificado por la fuente. Si se cancela, la operación de búsqueda se cancela. Event - search(event, ui) Este evento se activa después de que se cumplen los criterios de demora y minLength , justo antes de que se active el mecanismo especificado por la fuente. Si se cancela, la operación de búsqueda se cancela. Donde evento es de tipo Evento y ui es de tipo Objeto . Syntax `$( ".selector" ).autocomplete({ search: function( event, ui ) {} });`
8	seleccionar (evento, ui) Este evento se activa cuando se selecciona un valor en el menú de autocompletar. La cancelación de este evento evita que el valor se establezca en el elemento <input> (pero no evita que se cierre el menú). Event - select(event, ui) Este evento se activa cuando se selecciona un valor en el menú de autocompletar. La cancelación de este evento evita que el valor se establezca en el elemento <input> (pero no evita que se cierre el menú). Donde evento es de tipo Evento y ui es de tipo Objeto . Los posibles valores de ui son: item - Un objeto con propiedades de etiqueta y valor para la opción seleccionada. Syntax `$( ".selector" ).autocomplete({ select: function( event, ui ) {} });`

Ejemplo

El siguiente ejemplo demuestra el uso del método de evento en los widgets de autocompletar. Este ejemplo demuestra el uso de eventos focus y select .

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Autocomplete functionality</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      
      <style>
         #project-label {
            display: block;
            font-weight: bold;
            margin-bottom: 1em;
         }
         #project-icon {
            float: left;
            height: 32px;
            width: 32px;
         }
         #project-description {
            margin: 0;
            padding: 0;
         }
      </style>
      
      <!-- Javascript -->
      <script>
         $(function() { var projects = [ { value: "java", label: "Java", desc: "write once run anywhere", }, { value: "jquery-ui", label: "jQuery UI", desc: "the official user interface library for jQuery", }, { value: "Bootstrap", label: "Twitter Bootstrap", desc: "popular front end frameworks ", } ]; $( "#project" ).autocomplete({
               minLength: 0,
               source: projects,
               focus: function( event, ui ) {
                  $( "#project" ).val( ui.item.label ); return false; }, select: function( event, ui ) { $( "#project" ).val( ui.item.label );
                  $( "#project-id" ).val( ui.item.value ); $( "#project-description" ).html( ui.item.desc );
                  return false;
               }
            })
				
            .data( "ui-autocomplete" )._renderItem = function( ul, item ) {
               return $( "<li>" )
               .append( "<a>" + item.label + "<br>" + item.desc + "</a>" )
               .appendTo( ul );
            };
         });
      </script>
   </head>
   
   <body>
      <div id = "project-label">Select a project (type "a" for a start):</div>
      <input id = "project">
      <input type = "hidden" id = "project-id">
      <p id = "project-description"></p>
   </body>
</html>

Guardemos el código anterior en un archivo HTML autocompleteexample.htmy ábralo en un navegador estándar que admita javascript. También debe ver el siguiente resultado:

↰ Previous page Next page ↱