【问题标题】：jQuery autocomplete and flaskjQuery 自动完成和烧瓶
【发布时间】：2014-12-07 21:42:30
【问题描述】：

问候 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]})

这是顺便说一句 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>

如果我尝试输入我在数据库中的名称，它不会自动建议它，但如果我尝试我在列表中的名称之一（变量名称），它们会被附加正确，它可以自动建议它们。此外，如果我查看 autocomplete?term，我可以看到我确实得到了正确的信息，但它生成的信息是多维列表，如您所见： p>

填充的 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 对象

【问题讨论】：

标签： jquery python json autocomplete flask

【解决方案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"
        });
    });

【讨论】：