Javascript 未从数据库加载自动完成表单

Javascript 未从数据库加载自动完成表单,javascript,html,ajax,flask,Javascript,Html,Ajax,Flask,如果我手动填充列表,我的自动完成表单工作正常。但是,如果从db填充,则下拉列表不会填充 HTML/JS <div style="text-align: center;"> {% from "_formhelpers.html" import render_field %} <form method="POST" action="/"> <dl id="autocomplete" style="display:inli

如果我手动填充列表,我的自动完成表单工作正常。但是,如果从db填充,则下拉列表不会填充

HTML/JS

<div style="text-align: center;">
    {% from "_formhelpers.html" import render_field %}
        <form method="POST"  action="/">
            <dl id="autocomplete" style="display:inline-block;"> . 
               {{render_field(form.search) }}
           </dl>
           <button id="searchbutton" type="submit" style="display: inline-block;"  class="btn btn-outline-success my-2 my-sm-0" onclick="fetchlist(); return false;">Search</button>
        </form> 
</div>      


<script>
$(function() {
    $("#autocomplete").autocomplete({
        source:function(request, response) {
            $.getJSON("{{url_for('autocomplete')}}",{
                q: request.term, 
            }, function(data) {
                response(data.cities); 
            });
        },
        minLength: 2,
        select: function(event, ui) {
            console.log(ui.item.value); 
        }
    });
})

function fetchlist() {
    if (document.getElementById('searchbutton').onclick) {
        document.getElementById('list').style.display = 'inline';
    }
    else document.getElementById('list').style.display = 'inline';
}

理想情况下,我希望用户能够输入,自动完成返回并过滤数据库中的数据。一旦用户找到他们要找的东西,它就会根据此人的电话号码提取信息。

''cities=[“123”,“12”]''''难道你不需要返回字典吗?这意味着列表城市需要包含字典而不是元素。@Jessi否,如果我返回一个列表,它可以正常工作。
@app.route('/_autocomplete', methods=['GET'])
def autocomplete():
    c, conn = connection()
    qry = "SELECT Distinct PhoneNumber FROM webappdb.posts"
    c.execute(qry)
    x = c.fetchall()

    cities= list(chain.from_iterable(x))
    #cities = [x for x in c.fetchall()]
    print(cities)
    '''
    cities = [
          "123",
          "12"]'''

    return Response(json.dumps(cities), mimetype='application/json')
@app.route('/', methods=['GET', 'POST'])
def homepage():
    try:
        form=SearchForm(request.form)
        global d1
        d1 =""
        if request.method == "POST":
            s1 = form.search.data
            c,conn = connection()
            qry = "SELECT FirstName, LastName FROM posts WHERE PhoneNumber LIKE (%s)"
            c.execute(qry, s1)
            d1 = c.fetchall() 
            c.close()
            conn.close()
            print(d1)
        else: print('error')
        return render_template("index.html", data=d1, form = form)
    except Exception as e:
        return(str(e))