Вам нужно использовать ajax для питания динамической страницы. Сначала создайте страницу поиска с ajax в разделе script и другим фрагментом HTML в своем собственном файле с шаблоном для отображения результатов:
search.html
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
</head>
<input type="text" id="search">
<button type='button' id='search_button'>Search</button>
<div id='place_for_results'></div>
<script>
$(document).ready(function() {
$('#search_button').click(function(){
var query = $('#search').val();
$.ajax({
url: "/search_result",
type: "get",
data: {search:query},
success: function(response) {
$("#place_for_results").html(response.results);
},
error: function(xhr) {
//Do Something to handle error
}
});
});
});
</script>
</html>
results.html:
{%for result in results%}
<div>
{{result.val}}
<span type="button" id={{result.btn}}><i style="color: red" class="fas fa-heart"></i></span>
</div>
{%endfor%}
Затем в app.py создайте маршрут для визуализации search.html и другой маршрут /search_result для получения запроса:
from collections import namedtuple
@app.route('/search', methods=['GET'])
def search():
return flask.render_template('search.html')
@app.route('/search_result')
def search_for():
query = flask.request.args.get('search')
result = namedtuple('result', ['val', 'btn'])
vals = [("Article1", 60), ("Article2", 50), ("Article 3", 40)]
#below is a very simple search algorithm to filter vals based on user input:
html = flask.render_template('results.html', results=[result(a, b) for a, b in vals if query.lower() in a.lower()])
return flask.jsonify({'results':html})