En este artículo, haremos una búsqueda en vivo en Flask usando Jquery. La búsqueda en vivo significa que cada vez que un usuario escriba cualquier letra en el cuadro de entrada, se mostrarán todas las palabras que contengan esa letra.
Instalación
Este módulo no viene integrado con Python. Para instalarlo, escriba el siguiente comando en la terminal.
pip install flask
Después de instalar el matraz, cree un nuevo directorio para el proyecto. Dentro de eso, cree un nuevo archivo y asígnele el nombre app.py.
Python3
from flask import Flask,render_template
app = Flask(__name__)
@app.route("/")
def home():
return render_template("index.html")
if __name__ == "__main__":
app.run(debug=True)
Dentro del proyecto, cree nuevas plantillas de directorio y, dentro de eso, cree un nuevo archivo index.html. Este archivo contiene el código HTML para la entrada del usuario donde el usuario ingresará el texto deseado y se mostrará la salida. Jquery buscará todas las strings que contengan los caracteres coincidentes escritos por el usuario.
Índice.HTML
HTML
<!DOCTYPE html>
<html>
<head>
<title>GFG</title>
</head>
<body>
<input type="text" class="live-search-box" placeholder="search here" />
<ul class="live-search-list" type="None">
<li>C++</li>
<li>c</li>
<li>Python</li>
<li>Java</li>
<li>Javascript</li>
<li>Golang</li>
<li>R</li>
<li>Ruby</li>
<li>Scala</li>
<li>C#</li>
<li>PHP</li>
<li>Fortran</li>
<li>Dart</li>
</ul>
<script src="https://code.jquery.com/jquery-3.5.1.js" integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc=" crossorigin="anonymous"></script>
<script type="text/javascript">
jQuery(document).ready(function($){
$('.live-search-list li').each(function(){
$(this).attr('data-search-term', $(this).text().toLowerCase());
});
$('.live-search-box').on('keyup', function(){
var searchTerm = $(this).val().toLowerCase();
$('.live-search-list li').each(function(){
if ($(this).filter('[data-search-term *= ' + searchTerm + ']').length > 0 || searchTerm.length < 1) {
$(this).show();
} else {
$(this).hide();
}
});
});
});
</script>
</body>
</html>
Para ejecutar esta aplicación, abra cmd o terminal en el mismo directorio y escriba 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