En este artículo, aprenderemos cómo otorgar funciones como el autocompletado a los datos que se transmiten desde Flask. Autocompletar básicamente significa predecir el resto de la palabra cuando el usuario escribe algo. De esta manera, la interacción humana también aumenta con cada predicción correcta. Veamos cómo hacer lo mismo.
Usaremos jquery para el autocompletado.
Instalación :
Para instalar el matraz, escriba el siguiente comando en la terminal.
pip install flask
Primero, cree un nuevo directorio para el proyecto. Dentro de eso, cree un nuevo archivo y asígnele el nombre app.py.
app.py
Python3
from flask import Flask, request, render_template
app = Flask(__name__)
@app.route("/", methods=["POST", "GET"])
def home():
if request.method == "GET":
languages = ["C++", "Python", "PHP", "Java", "C", "Ruby",
"R", "C#", "Dart", "Fortran", "Pascal", "Javascript"]
return render_template("index.html", languages=languages)
if __name__ == '__main__':
app.run(debug=True)
Luego, cree un nuevo directorio dentro del proyecto para contener todos los archivos HTML y asígneles el nombre templates . En este archivo, tenemos un campo de entrada donde el usuario escribirá una string y la función jquery proporcionará las sugerencias.
índice.html
HTML
<!DOCTYPE html>
<html>
<head>
<title>AutoComplete</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.js">
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.js">
</script>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/ui-lightness/jquery-ui.css"
rel="stylesheet" type="text/css" />
</head>
<body>
<h1>Welcome to GFG</h1>
<input type="text" id="tags">
<script>
$( function() {
var availableTags = [
{% for language in languages %}
"{{language}}",
{% endfor %}
];
$( "#tags" ).autocomplete({
source: availableTags
});
} );
</script>
</body>
</html>
Para ejecutar esta aplicación, abra cmd o terminal y ejecute el siguiente comando.
python app.py
Producción:
Publicación traducida automáticamente
Artículo escrito por vivekpisal12345 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA