In this lesson we want to learn How to Create Live Search with Flask & JQuery.
What is Flask ?
Flask is micro web framework written in Python that provides an easy way to create and deploy web applications. It is minimalistic framework that doesn’t include an ORM (Object Relational Manager) or such features out of the box, but it gives developers the flexibility to choose and incorporate the tools they need for their project. this makes Flask best choice for small to medium-sized projects, as well as for prototyping. with Flask you can define your views as Python functions, and use a variety of libraries and plugins to extend its functionality. Flask also provides a simple and efficient way to handle HTTP requests and responses.
How to Create Live Search with Flask & JQuery ?
This is an example of how you can implement live search using Flask and jQuery:
In the Flask Python file:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
from flask import Flask, jsonify, request app = Flask(__name__) # Sample data data = [{"name": "John Doe", "email": "johndoe@example.com"}, {"name": "Jane Doe", "email": "janedoe@example.com"}, {"name": "Jim Smith", "email": "jimsmith@example.com"}, {"name": "Sarah Johnson", "email": "sarahjohnson@example.com"}] @app.route('/search', methods=['GET']) def search(): query = request.args.get('q') if query is None: return jsonify([]) results = [] for item in data: if query in item['name']: results.append(item) return jsonify(results) if __name__ == '__main__': app.run(debug=True) |
In the HTML file with the jQuery script:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
<input type="text" id="search-input"> <div id="results"></div> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <script> $(document).ready(function() { $('#search-input').on('keyup', function() { $.ajax({ url: '/search', data: { q: $('#search-input').val() }, success: function(data) { var results = ''; $.each(data, function(index, item) { results += '<p>' + item.name + ' (' + item.email + ')</p>'; }); $('#results').html(results); } }); }); }); </script> |
In this example Flask application exposes an endpoint /search that takes query string parameter q and returns JSON object containing the search results. the jQuery script listens to keyup event of the search input and makes an AJAX call to the Flask endpoint with the current input value. the returned data is then processed and displayed in the results div. this implementation provides a live search experience where the results are updated in real-time as the user types.
Run the code and go to this url http://127.0.0.1:5000/search?q=John Doe, this will be the result.
Learn More on Python
- PyQt6: The Ultimate GUI Toolkit for Python
- Python: The Most Versatile Programming Language of the 21st Century
- Tkinter: A Beginner’s Guide to Building GUI Applications in Python
- PySide6: The Cross-Platform GUI Framework for Python
- The Ultimate Guide to Kivy: Building Cross-Platform Apps with Python
- Discover the Power of Django: The Best Web Framework for Your Next Project
- How to Earn Money with Python
- Why Flask is the Ideal Micro-Web Framework
- Python Pillow: The Ultimate Guide to Image Processing with Python
- Get Started with Pygame: A Beginner’s Guide to Game Development with Python
- Python PyOpenGL: A Guide to High-Performance 3D Graphics in Python
- The Cross-Platform Game Development Library in Python
- Unleash the Power of Computer Vision with Python OpenCV
- Unleash the Power of Automated Testing with Python Selenium