Cannot get autocomplete to work with Jquery and Flask

Question

I am trying to query the database and return a list of phone numbers. I've tried a few different methods to no avail.

I followed this example, the solution portion, but it does not work. No errors or nothing, just does not autocomplete or return data from the database. jQuery autocomplete in Flask.

Flask

class SearchForm(Form):
    search = TextField('', id='autocomplete')
   # search = TextField('', [validators.Length(min=2, max=50)])

@app.route('/autocomplete', methods=['GET'])
def autocomplete():
    search = request.args.get('q')
    c, conn = connection()
    qry = "SELECT Distinct PhoneNumber FROM webappdb.posts where cast(PhoneNumber as Char) LIKE (%s)"
    c.execute(qry,(str(search)+'%',))
    results = c.fetchall()
    return jsonify(matching_results=results)

@app.route('/', methods=['GET', 'POST'])
def homepage():
    form=SearchForm(request.form)
    return render_template("index.html", form = form)

HTML

<div align="center">
</div>


            <div style="text-align: center;">
            {% from "_formhelpers.html" import render_field %}
                <form method="POST"  action="/">
                    <dl id="autocomplete" name ="autocomplete" text="text" 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>          

{% if data %}
    <div  style="text-align:center;">   
        <table id="list" style="display:none;" class = "table table-hover" >
            <thead>
                <th scope="col">First</th>
                <th scope="col">Last</th>
                <th scope="col">Rating</th>
                <th scope="col">Review</th>
             </thead>
             <tbody>
                {% for row in data %}
                    <tr>
                        {% for d in row %}
                            <td>{{ d }}</td>
                        {% endfor %}
                    </tr>
                {% endfor %}
            </tbody>
        </table>
        </div>

{% endif %}
</body>

<script>
$(function() {
    $("#autocomplete").autocomplete({
        source:function(request, response) {
            $.getJSON("{{url_for('autocomplete')}}",{
                q: request.term, // in flask, "q" will be the argument to look for using request.args
            }, function(data) {
                response(data.matching_results); // matching_results from jsonify
            });
        },
        minLength: 2,
        select: function(event, ui) {
            console.log(ui.item.value); // not in your question, but might help later
        }
    });
})

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