Skip to content
Related Articles

Related Articles

Live Search Using Flask And jQuery

View Discussion
Improve Article
Save Article
  • Last Updated : 09 Apr, 2021
View Discussion
Improve Article
Save Article

In this article, we will do a live search in Flask using Jquery. Live search means that whenever a user type any letter in the input box then all the words containing that letter will be shown.


This module does not come in-built with Python. To install it type the below command in the terminal.

pip install flask

After installing the flask create a new directory for the project. Inside that create a new file and name that 


from flask import Flask,render_template
app = Flask(__name__)
def home():
    return render_template("index.html")
if __name__ == "__main__":

Inside the project create new directory templates and inside that create a new file index.html. This file contains the HTML code for user input where user will input the desired text and the output will be shown. The Jquery will search for the all the strings containing the matching character(s) typed by the user.



<!DOCTYPE html>
<input type="text" class="live-search-box" placeholder="search here" />
<ul class="live-search-list" type="None">
<script src="" integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc=" crossorigin="anonymous"></script>
<script type="text/javascript">
$('.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) {
        } else {

To run this app open cmd or terminal in the same directory and type the below command.



live search flask

My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!