En el diseño web, la función de autocompletar es común. Cuando el usuario escribe algún valor en el cuadro de texto de búsqueda, muestra automáticamente una lista relevante de sugerencias en forma de menú desplegable que el usuario puede elegir fácilmente. Para la función jQuery Autocompletar, consulte este artículo.
Enfoque: en este artículo, utilizamos la API de búsqueda abierta de Wikipedia y la interfaz de usuario de autocompletado de jQuery. El código HTML básico se utiliza para la interfaz de usuario para la búsqueda de palabras clave en un cuadro de texto de entrada. Mientras usa el código jQuery, la solicitud de búsqueda se envía a Wikipedia, que a su vez devuelve una lista de sugerencias basadas en la entrada del usuario. La respuesta de datos está en formato JSON.
Sintaxis: URL de Wikipedia para API
"http://en.wikipedia.org/w/api.php"
Configuración del entorno: Para más configuraciones de opciones
https://en.wikipedia.org/w/api.php?action=help&modules=opensearch
El desarrollador puede consultar el enlace URL anterior y hacer uso de muchas opciones de configuración según las necesidades de la aplicación.
Bibliotecas jQuery y jQuery UI: los siguientes archivos se usan en el código.
<enlace href=” https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/themes/smoothness/jquery-ui.css” rel=”hoja de estilo” type=”text/css”/>
< script src=”https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/jquery-ui.min.js”></script>
<script src=””https://ajax.googleapis .com/ajax/libs/jquery/2.1.3/jquery.min.js”></script>
Ejemplo: el siguiente ejemplo demuestra la función de búsqueda de autocompletar mediante el uso de la API OpenSearch de Wikipedia y jQuery. El código HTML proporciona un cuadro de entrada de búsqueda normal que ofrece sugerencias cuando el usuario escribe algunos textos de búsqueda.
<!DOCTYPE html>
<html>
<head>
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
</script>
<link rel="stylesheet" href="
https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/themes/smoothness/jquery-ui.css" />
<script src="
https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/jquery-ui.min.js">
</script>
<style>
body {
width: 100%;
background: #e9e9e9;
margin: 0 auto;
padding: 0;
color: #7faf7f;
font-family: Arial, sans-serif;
font-size: 12px;
}
#searchID input {
width: 350px;
height: 20px;
margin: 0;
padding: 15px;
background: #fff;
border: 1px solid black;
color: #727272;
float: left;
font: 12px "Lucida Sans Unicode", sans-serif;
transition: background 0.4s ease-in-out 0s;
}
#searchID button {
width: 45px;
height: 45px;
text-indent: -9999em;
background: url("searchIcon.jpg") #4eac10;
transition: background 0.3s ease-in-out 0s;
border: 1px solid #fff;
}
#containerID {
width: 50%;
margin: 0 auto;
}
h2 {
color: green;
text-align: left;
}
</style>
</head>
<body>
<div id="containerID">
<div>
<h2>GeeksforGeeks</h2>
<b>
Autocomplete Search using jQuery
and Wikipedia Opensearch API
</b>
<p></p>
<form method="get" id="searchID">
<input type="text" class="searchClass"
id="searchInputID" value="" />
<button type="submit">Search</button>
</form>
</div>
</div>
<script type="text/javascript">
$(".searchClass").autocomplete({
source: function (request, response) {
console.log(request.term);
$.ajax({
// Wikipedia API url link
url:
"http://en.wikipedia.org/w/api.php",
dataType: "jsonp",
data: {
action: "opensearch",
// Output format
format: "json",
search: request.term,
namespace: 0,
// Maximum number of result
// to be shown
limit: 8,
},
success: function (data) {
response(data[1]);
},
});
},
});
</script>
</body>
</html>
Producción:
Publicación traducida automáticamente
Artículo escrito por geetanjali16 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA