jQuery 创建一个自动完成表单

Question

我需要您对我在 adjust.html 中的搜索表单的帮助。它应该从用户“q”获取输入，并从数据库表“book”[ 中建议可能的条目。 .用户应选择其中一项建议并按下“添加”按钮。

当我运行程序时，我收到以下错误:“RuntimeError: Missing input”。
我很感激你的想法和更正。

这是我的 JavaScript、Python 和 HTML 代码:

function configure()
    {
    // Configure typeahead
    $("#q").typeahead({
        highlight: false,
        minLength: 1
    },
    {
        display: function(suggestion) { return null; },
        limit: 10,
        source: search,
        templates: {
            suggestion: Handlebars.compile(
                "<div>"+
                "{{Title}}, {{Author}}" +
                "</div>"
            )
       },
        updater: function(item) {
        //take selected item and submit to the form
        this.$element[0].value = item;
        this.$element[0].form.submit();
        return item;
        }
    });
    // Hide info window when text box has focus
    $("#q").focus(function(eventData) {
        info.close();
    });

    // Give focus to text box
    $("#q").focus();
}

// Search database for typeahead's suggestions
function search(query, syncResults, asyncResults)
{
    // Get places matching query (asynchronously)
    let parameters = {
        q: query
    };
    $.getJSON("/adjust", parameters, function(data, textStatus, jqXHR) {

        // Call typeahead's callback with search results (Author Title)
        asyncResults(data);
    });
}

python 代码:

@app.route("/adjust", methods=["GET", "POST"])
@login_required
def search():
    """Search for books that match query"""
    if request.method == "GET":
        if not request.args.get("q"):
            return render_template("adjust.html")
        else:
            if request.args.get("q"): # handle ajax request
                q = request.args.get("q")  + "%"
            else:
                q = request.args.get("q")  + "%" # handle form submit

            books = db.execute("SELECT Title, Author FROM book WHERE Title LIKE :q OR Author LIKE :q", q=q)
    return jsonify(books)

html代码:

{% extends "layout.html" %}
{% block title %}
    Add your Book
{% endblock %}
{% block main %}
    <form action="/adjust">
        <div class="form-group">
        <p>Choose your Book</p>
        <label class="sr-only" for="q">Title, Author</label>
        <input class="form-control" id="q" placeholder="Title, Author" type="text"/>
        </div>
        <button class="btn" type="submit">Add</button>
    </form>
{% endblock %}

Answer 1

错误不是来自 Javascript，而是来自无法呈现 adjust.html 的 flask 对于 sql， token 不正确，它不是 ...LIKE: q但是 ...LIKE :q
这里是固定代码

@app.route("/adjust", methods=["GET", "POST"])
@login_required
def search():
    """Search for books that match query"""
    if request.method == "GET":
        if not request.args.get("q"):
            return render_template("adjust.html")
        else:
            if request.args.get("q"): # handle ajax request
                q = request.args.get("q")  + "%"
            else:
                q = request.form.get("q") + "%" # handle form submit

            books = db.execute("SELECT Title, Author FROM book WHERE Title LIKE :q OR Author LIKE :q", q=q)
    return jsonify(books)