jQuery 创建自动完成表单

Question

我需要您帮助我在 adjust.html 中搜索表单。它应该从用户 "q" 获得输入并建议来自数据库 table "book"[ 的可能条目。用户应选择其中一项建议并按下按钮 "Add"。

当我运行程序时，我收到以下错误："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，而是无法为 sql 呈现 adjust.html 的烧瓶错误，它不是 ...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)

jQuery 创建自动完成表单

jQuery Create an Autocomplete Form

forms

sqlite

jquery

autocomplete

cs50