jQuery UI consta de widgets GUI, efectos visuales y temas implementados mediante HTML , CSS y jQuery . jQuery UI es excelente para crear interfaces de interfaz de usuario para las páginas web. El widget de Autocompletar de jQuery UI se usa para realizar autocompletar y permite buscar y seleccionar rápidamente de una lista de valores rellenada previamente a medida que escriben, aprovechando la búsqueda y el filtrado.
El evento de respuesta de Autocompletar de jQuery UI se usa para activarse después de que se completa una búsqueda antes de que se muestre el menú. Este evento es útil para la manipulación local de datos de sugerencias, donde no se requiere una devolución de llamada de opción de fuente personalizada.
Sintaxis:
Inicialice la función de autocompletar con la devolución de llamada de respuesta especificada:
$( ".selector" ).autocomplete({
response: function( event, ui ) {}
});
Vincule un detector de eventos al evento autocompletarrespuesta:
$( ".selector" ).on(
"autocompleteresponse",
function( event, ui ) {}
);
Parámetros: Acepta una función de devolución de llamada que contiene dos parámetros.
- evento: Acepta valor de tipo Evento.
- ui: acepta el valor del tipo de objeto.
- contenido: este parámetro contiene los datos de respuesta y se puede modificar para cambiar los resultados que se mostrarán.
Enlace CDN: Primero, agregue los scripts jQuery UI necesarios para su proyecto.
<enlace rel=”hoja de estilo” href=”//code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css”>
<script src=”//code.jquery.com/jquery- 1.12.4.js”></script>
<script src=”//code.jquery.com/ui/1.12.1/jquery-ui.js”></script>
Ejemplo: este ejemplo describe los usos del evento de respuesta de autocompletar de jQuery UI.
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content=
"width=device-width, initial-scale=1">
<link rel="stylesheet" href=
"//code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.12.4.js">
</script>
<script src="//code.jquery.com/ui/1.12.1/jquery-ui.js">
</script>
<script>
$(function () {
var subjects = [
"HTML",
"CSS",
"JavaScript",
"jQuery",
"PHP",
"React",
"Node.js"
];
$("#GFG").autocomplete({
source: subjects,
response: function( event, ui ) {
alert("Response Event Triggered");
}
});
});
</script>
</head>
<body>
<center>
<div class="ui-widget">
<h1 style="color: green;">
GeeksforGeeks
</h1>
<h3>jQuery UI Autocomplete response Event</h3>
<label for="GFG">
Select Subject:
</label>
<input id="GFG">
</div>
</center>
</body>
</html>
Producción:
Referencia: https://api.jqueryui.com/autocomplete/#event-response