jQuery全自动瓶

Question

你好斯塔克沃弗，

我很难从我传递给输入字段的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()

正如你所看到的，我正在传递一个正常的列表，只是为了看看它是否适用。

视图

我有我正常的忍者视图，在那里我将所有的信息传递到视图中。

{{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，我可以看到我确实得到了正确的信息，但是它生成的是一个MultiDimensional列表，正如您所看到的：

填充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的键值？

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