En este artículo, vamos a ver cómo usar la función de autocompletar de búsqueda en JQuery. Para esto, vamos a usar la función incorporada de jQuery llamada autocompletar. Lo haremos en dos etapas diferentes.
- Cree un archivo HTML básico y agréguele una barra de entrada.
- Implementar la funcionalidad de autocompletar.
Código HTML: aquí crearemos la estructura para tomar la entrada del usuario y adjuntar el enlace jQuery CDN en la sección principal.
Agregue scripts jQuery en su archivo HTML:
<script src=”https://code.jquery.com/jquery-1.12.4.js”></script>
<script src=”https://code.jquery.com/ui/1.12.1/jquery -ui.js”></secuencia de comandos>
index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Jquery Autocomplete</title> <script src="https://code.jquery.com/jquery-1.12.4.js"> </script> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"> </script> </head> <body> <input type="text" id="auto" placeholder="enter something" /> </body> </html>
Código jQuery: para esto, vamos a utilizar la función incorporada de jQuery llamada autocompletar. Esta función toma una lista de palabras como fuente. Y cuando escribimos cualquier carácter, buscará en la lista dada y mostrará la salida, si hay alguna disponible.
Sintaxis:
$("TagId").autocomplete({
source : itemList // List of Words.
})
Javascript
$(document).ready(function() {
// array of items.
var items = [
"C++",
"Java",
"Python",
"C#",
"DSA",
"STL",
"Self Placed",
"Android",
"Kotlin",
"GeeksforGeeks",
"GFG",
];
// jQuery inbuild function
$("#auto").autocomplete({
source: items // list of items.
});
})
Salida: Después de cob inig tanto en la sección de código obtendremos la siguiente salida.
Publicación traducida automáticamente
Artículo escrito por iamabhishekkalra y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA