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 cambio de Autocompletar de jQuery UI se usa para desenstringr cuando el campo de búsqueda está borroso y el valor ha cambiado.
Sintaxis:
Inicialice la función de autocompletar con la devolución de llamada de cambio especificada:
$( ".selector" ).autocomplete({
change: function( event, ui ) {}
});
Vincule un detector de eventos al evento autocompletarcambio:
$( ".selector" ).on(
"autocompletechange",
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.
- item: Es el elemento seleccionado de la lista del menú; de lo contrario, la propiedad es nula.
Enfoque: 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 cambio 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"
];
$("#inputID").autocomplete({
source: subjects,
change: function( event, ui ) {
alert("Change Event Triggered");
}
});
});
</script>
</head>
<body>
<center>
<div class="ui-widget">
<h1 style="color:green;">
GeeksforGeeks
</h1>
<h3>jQuery UI Autocomplete change Event</h3>
<label for="inputID">
Select Subject:
</label>
<input id="inputID">
</div>
</center>
</body>
</html>
Producción:
Referencia: https://api.jqueryui.com/autocomplete/#event-change