Flask Dynamic data update without reload page
Working example:
app.py
from flask import Flask, render_template, requestimport requestsfrom bs4 import BeautifulSoupapp = Flask(__name__)@app.route('/')def index(): return render_template('index.html')@app.route('/suggestions')def suggestions(): text = request.args.get('jsdata') suggestions_list = [] if text: r = requests.get('http://suggestqueries.google.com/complete/search?output=toolbar&hl=ru&q={}&gl=in'.format(text)) soup = BeautifulSoup(r.content, 'lxml') suggestions = soup.find_all('suggestion') for suggestion in suggestions: suggestions_list.append(suggestion.attrs['data']) #print(suggestions_list) return render_template('suggestions.html', suggestions=suggestions_list)if __name__ == '__main__': app.run(debug=True)index.html
<!DOCTYPE html><html><head> <title>Suggestions</title></head><body>Search: <input type="text" id="search_form_input"></input><div id="place_for_suggestions"></div><script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script><script>$("#search_form_input").keyup(function(){ var text = $(this).val(); $.ajax({ url: "/suggestions", type: "get", data: {jsdata: text}, success: function(response) { $("#place_for_suggestions").html(response); }, error: function(xhr) { //Do Something to handle error } });});</script></body></html>suggestions.html
<label id="value_lable"> {% for suggestion in suggestions %} {{ suggestion }}<br> {% endfor %}</label>