jQuery autocomplete menu not populated using Flask

Question

I've been flipping tables over this for days now and really hope someone can help.

I have a simple Bootstrap web form that takes freetype text and adds the entries to a MySQL database table. To help users avoid typos or duplicative terms for the same thing, I'd like to implement the jQuery autocomplete plugin to suggest entries the DB table already has.

Using app.logger.debug() and console.log(), I can see that the DB call is successful and that I get existing DB entries in an array ["item1", "item2", ..] on the frontend.

The problem is that, while typing, the form field only shows a few pixels of the autocomplete menu, without content.

I'm using Bootstrap stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css and jQuery / jQuery UI code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css, code.jquery.com/jquery-3.3.1.min.js, code.jquery.com/ui/1.12.1/jquery-ui.min.js

JS:

$(":text").focus( function() {
    var input_field = encodeURIComponent($( this ).attr('id'))
    var dataString  = 'input_field=' + input_field

    $.getJSON('/availability_autosuggest'
        , dataString
        , function (data) {
            console.log(input_field)
            console.log(data)
            $('#' + input_field).autocomplete({
                                        minLength: 2
                                        , source: data});
        }
    )

Flask:

from flask import Flask, render_template, request, jsonify
from flask_bootstrap import Bootstrap

@app.route('/availability_autosuggest', methods=['GET', 'POST'])
def availability_autosuggest():
    db_entries = []
    input_field     = request.args.get('input_field')
    # returns list of table entries ["item1", "item2", ..]
    db_entries.append(DBOperations().query_table('table_name', column_name=input_field))

    return jsonify(db_entries)

What am I missing?!

The following posts seem to be related but the suggestions didn't solve my problem:

jQuery autocomplete menu not populated using Flask

0 Answers0