使用 Flask 和 jQuery 进行实时搜索

在本文中，我们将使用 Jquery 在 Flask 中进行实时搜索。实时搜索意味着每当用户在输入框中键入任何字母时，都会显示包含该字母的所有单词。

安装

该模块不是内置于Python的。要安装它，请在终端中键入以下命令。

pip install flask

安装烧瓶后，为项目创建一个新目录。在里面创建一个新文件并命名为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)

在项目内部创建新的目录模板，并在其中创建一个新文件index.html。该文件包含用于用户输入的 HTML 代码，用户将在其中输入所需的文本并显示输出。 Jquery 将搜索包含用户键入的匹配字符的所有字符串。

索引文件

HTML

    GFG


  

  

C++
c
Python
Java
Javascript
Golang
R
Ruby
Scala
C#
PHP
Fortran
Dart

  

  

    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();
        }
  
    });
  
});
  
});

  

要运行此应用程序，请在同一目录中打开 cmd 或终端，然后键入以下命令。

python app.py

输出：