jQuery自动完成和烧瓶

Question

问候Stackoverflow，

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

表格

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

控制器

索引

这是控制器，只是将ClassForm传递给视图，该视图将填充所有字段

@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]})

这是btw getAllStudents（）

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

好吧，你可以看到我正在通过一个正常的列表，看它是否适用。

查看

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

{{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），则会附加它们正确，它可以自动建议他们。另外，如果我查看 自动完成？术语 ，我可以看到我确实获得了正确的信息，但它会将其生成为多维列表，如您所见：

填充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"
    }
  ]
}

所以我想知道，如何使用字典变量名称（键值）自动建议多数组列表中的名称？ 然后在旁边的按钮上添加到列表中？值将附加到选定区域的位置。例如，Firstname和lastname将合并为一个字符串，并且将使用带有ID的keyvalue打印在链接中？

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