如何在Flask电影推荐API中实现输入字符自动联想电影功能

问题分析 #

当前代码存在的核心问题：

• 前端自动联想依赖页面渲染时传入的静态列表，无法动态响应输入的字母前缀
• 后端缺少根据前缀匹配电影名称的接口，仅能处理完整电影名的推荐请求

步骤1：修改后端app.py，新增前缀匹配接口 #

从数据集提取所有电影名称，新增GET接口处理前端的联想请求，返回匹配的电影列表。

修改后的app.py代码：

from flask import Flask, jsonify, request, render_template
from flask_cors import CORS
import pandas as pd

item_similarity_df = pd.read_csv("movie_similarity.csv", index_col=0)
# 提取所有电影名称存入列表
all_movies = item_similarity_df.index.tolist()

app = Flask(__name__)
CORS(app)

@app.route("/")
def index():
    return render_template("index.html")

@app.route("/recms", methods = ["POST"])
def make_rec():
    if request.method == "POST":
        data = request.json
        movie = data["movie_title"]
        try: 
            similar_score = item_similarity_df[movie]
            similar_movies = similar_score.sort_values(ascending=False)[1:50]
            api_recommendations = similar_movies.index.to_list()
        except:
            api_recommendations = ['Movie not found']
        return jsonify(api_recommendations=api_recommendations)

# 新增自动联想接口
@app.route("/autocomplete", methods=["GET"])
def autocomplete():
    prefix = request.args.get("term", "").lower()
    # 不区分大小写匹配前缀
    matching_movies = [movie for movie in all_movies if movie.lower().startswith(prefix)]
    return jsonify(matching_movies)

if __name__ == "__main__":
    app.run(host='0.0.0.0', port=8080)

步骤2：修改前端index.html，实现动态联想 #

修改自动联想逻辑，让它实时调用后端接口获取匹配列表，同时保留选中电影后获取推荐的功能。

修改后的index.html代码：

<!DOCTYPE html>
<html>
<head>
    <title>电影推荐自动联想</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.js">  
    </script>  
    
    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.js">  
    </script>  
    
    <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/ui-lightness/jquery-ui.css"
        rel="stylesheet" type="text/css" />  
</head>
<body>
    <h1>电影推荐系统</h1>
    <input type="text" id="tags" placeholder="输入电影名或首字母">
    <div id="recommendations" style="margin-top:20px;"></div>
    
    <script>
  $( function() {
    $( "#tags" ).autocomplete({
      source: function(request, response) {
        // 调用后端联想接口获取匹配结果
        $.get("/autocomplete", { term: request.term }, function(data) {
          response(data);
        });
      },
      minLength: 1, // 输入1个字符触发联想
      select: function(event, ui) {
        // 选中电影后请求推荐列表并展示
        $.post("/recms", { movie_title: ui.item.value }, function(data) {
          let recHtml = "<h3>推荐影片：</h3><ul>";
          data.api_recommendations.forEach(movie => {
            recHtml += `<li>${movie}</li>`;
          });
          recHtml += "</ul>";
          $("#recommendations").html(recHtml);
        });
      }
    });
  } );
  </script>
    
</body>
</html>

关键修改说明 #

1. 后端：
   • 提前提取所有电影名称，避免每次联想都读取数据集
   • 新增/autocomplete接口，通过term参数接收前缀，返回匹配的电影名
   • 调整根路由直接返回页面，推荐接口返回JSON格式数据，方便前端处理
2. 前端：
   • 将自动联想的数据源改为动态请求后端接口
   • 设置minLength:1，支持输入单个字符触发联想
   • 增加选中事件，自动调用推荐接口并渲染结果

修改完成后，输入任意字母即可实时获取匹配的电影名称，同时保留原有的电影推荐功能。

内容的提问来源于stack exchange，提问作者Abhishek Shahi