En este artículo, vamos a ver cómo hacer que un archivo de entrada (texto de entrada) se complete automáticamente. Para hacer esto, usamos la biblioteca jquery UI. Aquí tomamos el campo de entrada donde los usuarios tienen la capacidad de buscar y seleccionar fácilmente de una lista de valores rellenada previamente escribiendo términos de búsqueda y filtros.
Pasos:
- Incluya la ruta CDN de la biblioteca jQuery UI en un orden particular seguido del código a continuación, este paso se sigue tanto para CSS como para JavaScript.
- Después de incluir el archivo jQuery CDN, debe adjuntar una etiqueta <script> al final de la etiqueta del cuerpo o inmediatamente antes de la etiqueta del cuerpo.
- Luego, siga la plantilla de la función API de autocompletar proporcionada por jQuery UI.
Sintaxis:
$(element).autocomplete(options);
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content=
"width=device-width, initial-scale=1">
<title>jQuery UI Autocomplete</title>
<link rel="stylesheet" href=
"//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet"
href="/resources/demos/style.css">
<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 style="border:2px solid green;min-height:240px;">
<div style="display:flex; justify-content:center">
<h1 style="color:green;">
GeeksforGeeks
</h1>
</div>
<div class="ui-widget" style="display:flex;
justify-content:center;margin-top:20px;">
<input id="langs" placeholder="Your Favorite language">
</div>
<script>
$(function () {
let availableTags = [
"ActionScript",
"AppleScript",
"Asp",
"BASIC",
"C",
"C++",
"Clojure",
"COBOL",
"ColdFusion",
"Erlang",
"Fortran",
"Groovy",
"Haskell",
"Java",
"JavaScript",
"Lisp",
"Perl",
"PHP",
"Python",
"Ruby",
"Scala",
"Scheme"
];
$("#langs").autocomplete({
source: availableTags
});
});
</script>
</body>
</html>
Producción:
Producción
Publicación traducida automáticamente
Artículo escrito por debadebaduttapanda7 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA