使用来自SQL数据库的数据在输入属性更改时使用Javascript实时更新HTML表

我在这里玩得很开心，想让它发挥作用。我很确定我已经做了几乎所有的研究试图解决这个问题，我只是不知道我错在哪里。所以，尽管如此，还是要提前感谢你们能提供的任何帮助

我将首先发布我的代码：

HTML:

Javascript:

// execute when the DOM is fully loaded
$( document ).ready(function() {
    configure();
});

/**
 * Configures application.
 */
function configure()
{
    // configure typeahead
    $("#q").on('input propertychange paste', function() {
        //$("#q").val("hi");

        // get items matching query (asynchronously)
        var table = "<thead><tr><th>ID</th><th>Item</th><th>Buy</th><th>Sell</th></tr></thead><tr>";

        var parameters = {
            q: $("q").val()
        }; 

        $.getJSON(Flask.url_for("search"), parameters)
        .done(function(data) {
            $('#q').val("hi");
            for (var i=0; i<data.length; i++) {
                obj = data[i];
                for (var key in obj) {
                    table += "<td>" + key + "</td>";
                }
            }
            table += "</tr>";

            $("#itemTable").replaceWith(table);
            //document.getElementById('').innerHTML = table;
        })
        .fail(function() {
            // log error to browser's console
            console.log(errorThrown.toString());
        });
    });

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

//当DOM完全加载时执行
$（文档）.ready（函数（）{
configure（）；
});
/**
*配置应用程序。
*/
函数配置（）
{
//配置typeahead
$（“#q”）.on（'InputPropertyChange paste'，function（）{
//$（#q）val（“hi”）；
//获取与查询匹配的项（异步）
var table=“IDItemBuySell”；
变量参数={
q:$（“q”）.val（）
}; 
$.getJSON（Flask.url_用于（“搜索”），参数）
.完成（功能（数据）{
$（'q'）.val（“hi”）；
对于（var i=0；i选择器
#itemTable
在HTML中不匹配。
元素
name
属性值为
“itemTable”
；元素在HTML中没有设置
id
。使用
$（“table[name=itemTable]”）或将
id
设置为
“itemTable”
在HTML中可以使用
#itemTable
选择器并匹配现有的
元素。
选择器
#itemTable
在HTML中不匹配。
元素
名称
属性值为
“itemTable”
；元素在HTML中没有设置
id
。请使用
$（“table>）[name=itemTable]”
或将
id
设置为
“itemTable”
在HTML中，可以使用
#itemTable
选择器并匹配现有的
元素。
感谢您的捕获！我修复了这个问题，但我应该补充一点，我的代码甚至从未到达getJSON块。正如您所见，我尝试在getJSON调用中更改输入文本框的值，但文本框从未得到更新我想说声“嗨”.似乎我可能调用getJSON错误？不确定。
Flask
是在JavaScript中定义的吗？你能解释一下我将如何在JavaScript中定义Flask吗？我有另一个项目在工作，我没有在该项目中看到Flask的导入或任何东西。无可否认，我对JavaScript非常陌生。我试着查找如何导入Flask，但我找不到任何有用的东西。编辑：我只是在另一个程序中找到了JSGlue。可能是这样吧？在对有问题的代码发出请求之前，您可以向服务器发出一次URL请求；例如在
窗口
加载
事件好的，所以我现在设法进入了getJSON调用。谢谢您的帮助但是现在我进入了问题的真正部分，从SQL数据库中获取JSON后，我将如何设置表的格式？据我所知，我的格式至少大部分是正确的，但在删除旧表和插入新表时，我可能会遇到问题。您有什么想法吗有什么问题吗？谢谢你的提醒！我已经解决了这个问题，但我应该补充一点，我的代码从来没有进入过getJSON块。正如你所看到的，我试图在getJSON调用中更改输入文本框的值，但文本框从未更新为说“嗨”.似乎我可能调用getJSON错误？不确定。
Flask
是在JavaScript中定义的吗？你能解释一下我将如何在JavaScript中定义Flask吗？我有另一个项目在工作，我没有在该项目中看到Flask的导入或任何东西。无可否认，我对JavaScript非常陌生。我试着查找如何导入Flask，但我找不到任何有用的东西。编辑：我只是在另一个程序中找到了JSGlue。可能是这样吧？在对有问题的代码发出请求之前，您可以向服务器发出一次URL请求；例如在
窗口
加载
事件好的，所以我现在设法进入了getJSON调用。谢谢您的帮助但是现在我进入了问题的真正部分，从SQL数据库中获取JSON后，我将如何设置表的格式？据我所知，我的格式至少大部分是正确的，但在删除旧表和插入新表时，我可能会遇到问题。您有什么想法吗这有什么关系吗？
# configure application
app = Flask(__name__)

# ensure responses aren't cached
if app.config["DEBUG"]:
    @app.after_request
    def after_request(response):
        response.headers["Cache-Control"] = "no-cache, no-store, must-revalidate"
        response.headers["Expires"] = 0
        response.headers["Pragma"] = "no-cache"
        return response


# configure session to use filesystem (instead of signed cookies)
app.config["SESSION_FILE_DIR"] = gettempdir()
app.config["SESSION_PERMANENT"] = False
app.config["SESSION_TYPE"] = "filesystem"
Session(app)

@app.route("/", methods=["GET", "POST"])
def index():
    if request.method == "POST":
        if not request.form.get("q"):
            return print("Give me a search query")
        else:
            q = request.form.get("q") + "%"
            print(q)

            conn = sqlite3.connect('items.db')
            db = conn.cursor()

            db.execute("SELECT * FROM items WHERE item LIKE '{}'".format(q))
            itemList = db.fetchall()

            db.execute("SELECT * FROM vehicles")
            vehicleList = db.fetchall()

            db.close()
            conn.close()


            return render_template("index.html", items = itemList, vehicles = vehicleList)

    # else if user reached route via GET (as by clicking a link or via redirect)
    else:

        # configure CS50 Library to use SQLite database
        conn = sqlite3.connect('items.db')
        db = conn.cursor()

        db.execute("SELECT * FROM items")
        itemList = db.fetchall()

        db.execute("SELECT * FROM vehicles")
        vehicleList = db.fetchall()

        db.close()
        conn.close()

        return render_template("index.html", items = itemList, vehicles = vehicleList)

@app.route("/search")
def search():
    """Search for places that match query."""
    print("here")
    # TODO
    q = request.args.get("q") + "%"

    items = db.execute("SELECT * FROM items WHERE item LIKE '{}'".format(q))

    return jsonify(items)

// execute when the DOM is fully loaded
$( document ).ready(function() {
    configure();
});

/**
 * Configures application.
 */
function configure()
{
    // configure typeahead
    $("#q").on('input propertychange paste', function() {
        //$("#q").val("hi");

        // get items matching query (asynchronously)
        var table = "<thead><tr><th>ID</th><th>Item</th><th>Buy</th><th>Sell</th></tr></thead><tr>";

        var parameters = {
            q: $("q").val()
        }; 

        $.getJSON(Flask.url_for("search"), parameters)
        .done(function(data) {
            $('#q').val("hi");
            for (var i=0; i<data.length; i++) {
                obj = data[i];
                for (var key in obj) {
                    table += "<td>" + key + "</td>";
                }
            }
            table += "</tr>";

            $("#itemTable").replaceWith(table);
            //document.getElementById('').innerHTML = table;
        })
        .fail(function() {
            // log error to browser's console
            console.log(errorThrown.toString());
        });
    });

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