Flask应用开发求助：选择主题后自动填充关联人员输入框

直接针对你代码里的问题给出修正方案和说明：

后端main.py修正 #

from flask import Flask, render_template, request, Response
import json
# 若使用WTForms，需导入对应组件
from wtforms import Form, TextField

application = Flask(__name__)

class SearchForm(Form):
    autocomp = TextField('Insert a Topic', id='autocom')
    auto_ifxp = TextField('Person', id="person")

# 获取所有主题的接口
@application.route("/_autocomplete", methods=["GET"])
def autocomp():
    topics = get_topic()  # 调用你从Neo4j获取主题的函数
    return Response(json.dumps(topics), mimetype='application/json')

# 根据选中主题获取关联人员的接口
@application.route("/_autocomplete_p", methods=["GET"])
def autocom_ifx():
    # GET请求用request.args取参数，而非request.form
    selected_topic = request.args.get("topic")
    if not selected_topic:
        return Response(json.dumps([]), mimetype='application/json')
    persons = get_person(selected_topic)  # 传入选中主题获取关联人员
    return Response(json.dumps(persons), mimetype='application/json')

前端dashboard.html修正 #

<label for="autocom">选择主题</label>
<input id="autocom" name="autocom" type="text">

<label for="person">关联人员</label>
<input id="person" name="autocom_p" type="text">

<script>
$(function(){
    // 主题输入框自动补全逻辑
    $.ajax({
        url: '/_autocomplete'
    }).done(function (data){
        $('#autocom').autocomplete({
            source: data,
            minLength: 1,
            // 选中主题后触发人员列表请求
            select: function(event, ui) {
                $.ajax({
                    url: '/_autocomplete_p',
                    data: { topic: ui.item.value }
                }).done(function(persons){
                    // 给人员输入框绑定自动补全源
                    $('#person').autocomplete({
                        source: persons,
                        minLength: 0
                    });
                    // 若需直接填充第一个人员，可添加：$('#person').val(persons[0]);
                });
            }
        });
    });
});
</script>

核心修正点 #

• 后端：GET请求必须用request.args获取参数，request.form仅适用于POST请求；修复了人员接口的参数传递逻辑，确保能拿到用户选中的主题。
• 前端：修正了输入框ID不匹配问题（原JS中用#ifx_person，实际DOM ID为person）；调整为选中主题后再请求对应人员列表，保证人员数据与选中主题关联。
• 逻辑优化：通过主题输入框的select事件触发人员接口请求，每次切换主题都会更新人员列表。

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