Skip to content
Related Articles

Related Articles

Improve Article
Live Search Using Flask And jQuery
  • Last Updated : 09 Apr, 2021

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.

Installation

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 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)

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.



Index.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>

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

python app.py

Output:

live search flask

 Attention geek! Strengthen your foundations with the Python Programming Foundation Course and learn the basics.  

To begin with, your interview preparations Enhance your Data Structures concepts with the Python DS Course. And to begin with your Machine Learning Journey, join the Machine Learning – Basic Level Course




My Personal Notes arrow_drop_up
Recommended Articles
Page :