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 búsqueda de Autocompletar de jQuery UI se usa para desenstringr antes de que se realice una operación de búsqueda después de que se cumplan las opciones minLength y delay. Si se cancelan estas opciones, no se iniciará ninguna solicitud ni se sugerirán artículos.
Sintaxis:
Inicialice la función de autocompletar con la devolución de llamada de búsqueda especificada:
$( ".selector" ).autocomplete({
search: function( event, ui ) {}
});
Vincule un detector de eventos al evento de búsqueda de autocompletar:
$( ".selector" ).on(
"autocompletesearch",
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. El objeto ui puede estar vacío pero se puede usar para mantener la coherencia con otros eventos.
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 búsqueda 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,
search: function( event, ui ) {
alert("Search Event Triggered");
}
});
});
</script>
</head>
<body>
<center>
<div class="ui-widget">
<h1 style="color: green;">
GeeksforGeeks
</h1>
<h3>jQuery UI Autocomplete search Event</h3>
<label for="GFG">
Select Subject:
</label>
<input id="GFG">
</div>
</center>
</body>
</html>
Producción:
Referencia: https://api.jqueryui.com/autocomplete/#event-search