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 método jQuery UI Autocompletar search() se usa para desenstringr un evento de búsqueda e invoca la fuente de datos si el evento no se cancela. Este método se llama cuando se realiza la operación de búsqueda.
Sintaxis:
$( ".selector" ).autocomplete( "search", "value" );
Parámetros: este método acepta un único valor de parámetro que contiene un valor de tipo String.
Vínculos de 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 método jQuery UI Autocompletar search().
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
});
$("#btn").on('click', function() {
$("#GFG").autocomplete("search", "J");
})
});
</script>
</head>
<body>
<center>
<div class="ui-widget">
<h1 style="color: green;">
GeeksforGeeks
</h1>
<h3>jQuery UI Autocomplete search() Method</h3>
<label for="GFG">
Select Subject:
</label>
<input id="GFG">
</div>
<input type="button" id="btn"
style="padding: 5px 15px; margin-top: 40px;"
value="Search the Element">
</center>
</body>
</html>
Producción:
Referencia: https://api.jqueryui.com/autocomplete/#method-search