jQuery创建一个自动完成表格

Question

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

运行程序时，出现以下错误：“ RuntimeError：缺少输入”。 感谢您的想法和纠正。

这是我的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，而是无法为SQL呈现success: function(result) { alert(result.message); }, 的令牌的烧瓶不正确，不是adjust.html而是...LIKE: q

这里是固定代码

...LIKE :q