jQuery 自动完成和 Flask

Question

问候 Stackoverflow，

我正在努力从传递到输入字段的 JSON 对象中获取正确的信息。

表格

   class ClassForm(Form):
        function_name = StringField('Students', validators = [Required()])
        submit = SubmitField('Submit')

Controller

索引

这是 Controller ，它只是将 ClassForm 传递给 View ， View 将填充所有字段

@admin.route('/')
def index():
    form = ClassForm()
    return render_template('admin/class/index.html', form=form)

自动完成

这是 get 请求，它将从 User 表中获取所有名字、姓氏和 id(也使用角色过滤它，但这无关紧要)

@admin.route('/autocomplete',methods=['GET'])
def autocomplete():
    u = UserClass()
    d = ['aa', 'bb', 'test', 'long name with space', 'test2', 'mega test']
    for x in u.getAllStudents():
        d.append({'Firstname': x[0], 'Lastname': x[1], 'ID': x[2]})

这是 getAllStudents()

db.session.query(User.user_fistName, User.user_lastName, User.id).filter(Role.role_name.in_(['Student'])).join(Role).all()

正如您所看到的，我正在传递一个普通列表，只是为了看看它是否适用于该列表。

查看

我有正常的 jinja View ，我将所有信息传递给 View 。

{{form.function_name.label()}}
{{form.function_name()}}

JavaScript 调用

<script>
$(function() {
    $.ajax({
        url: '{{ url_for("admin.autocomplete") }}'
        }).done(function (data) {
            $('#function_name').autocomplete({
                source: data.json_list,
                datatype: "json",
                datafields: [
                        { name: 'Firstname' },
                        { name: 'Lastname'},
                        {name: 'ID'}
                    ]
            });
        });
    });
</script>

如果我尝试输入数据库中的名称，它不会自动建议它，但如果我尝试列表中的名称之一(变量 NAMES)，它们会被附加正确并且它可以自动建议它们。另外，如果我查看 autocomplete?term 我可以看到我确实获得了正确的信息，但它会将其生成为多维列表，如您所见:

填充的 JSON 列表

{
  "json_list": [
    "aa",
    "bb",
    "test",
    "long name with space",
    "test2",
    "mega test",
    {
      "Firstname": "John",
      "ID": 1,
      "Lastname": "Doe"
    },
    {
      "Firstname": "Jane",
      "ID": 2,
      "Lastname": "Doe"
    }
  ]
}

所以我想知道，如何使用字典变量名称(键值)自动建议多数组列表中的名称？然后点击旁边的按钮添加到列表？值将附加到所选区域。例如名字和姓氏将被合并成一个字符串，并且带有ID的键值将被打印在链接中？

<ol>
  <li>John Doe<a href="ID?=1"></a></li>
  <li>John Doe<a href="ID?=2"></a></li>
  <li>John Doe<a href="ID?=3"></a></li>
</ol>

编辑，向 json 对象添加字典键值

Answer 1

你可以这样做:

$.ajax({
    url: '{{ url_for("admin.autocomplete") }}'
    }).done(function (data) {

     var newData = [];

     for (var i = 0; i < data.json_list.length; i++) {

      var obj = {
       label: data.json_list[i].Firstname + ' ' + data.json_list[i].Lastname,
       value: data.json_list[i].Firstname + ' ' + data.json_list[i].Lastname,
       id: data.json_list[i].ID
      }

      newData.push(obj);
     };


        $('#function_name').autocomplete({
            source: newData,
            datatype: "json"
        });
    });