如何使用handsontable自动完成ajax功能？

编程问答 2022-05-17

问题描述

我按照下面的链接进行操作演示。但它不起作用。我不知道出了什么问题。 https://handsontable.com/docs/8.3.2/demo-autocomplete.html#strict-ajax

ma​​in.py

from flask import Flask,render_template,jsonify,json,request,redirect
app = Flask(__name__)

@app.route('/')
def main():
    return render_template('index.html')

if __name__ == '__main__':
    app.run(debug=True)

templates/index.html

<html>
    <head>
        <script src="https://cdn.jsdelivr.net/npm/handsontable@8.3.2/dist/handsontable.full.min.js"></script>
        <link href="https://cdn.jsdelivr.net/npm/handsontable@8.3.2/dist/handsontable.full.min.css" rel="stylesheet" media="screen">
    </head>
    <script>
        function getCarData() {
            return [
                {car: "Mercedes A 160",year: 2017,price_usd: 7000,price_eur: 7000},{car: "Citroen C4 Coupe",year: 2018,price_usd: 8330,price_eur: 8330},{car: "Audi A4 Avant",year: 2019,price_usd: 33900,price_eur: 33900},{car: "Opel Astra",year: 2020,price_usd: 5000,price_eur: 5000},{car: "BMW 320i Coupe",year: 2021,price_usd: 30500,price_eur: 30500}
            ];
        }
    </script>
    
    <body>
        <div id="example3"></div>
        <script>
            var
                container3 = document.getElementById('example3'),hot;
                hot = new Handsontable(container3,{
                    data: getCarData(),colHeaders: ['Car','Year','Chassis color','Bumper color'],columns: [
                        {
                        type: 'autocomplete',source: function (query,process) {
                            $.ajax({
                                url: 'https://handsontable.com/docs/8.3.2/scripts/json/autocomplete.json',dataType: 'json',data: {
                                    query: query
                                },success: function (response) {
                                    console.log("response",response);
                                    process(JSON.parse(response.data)); // JSON.parse takes string as a argument
                                    // process(response.data);

                                }
                            });
                        },strict: true
                        },{},// Year is a default text column
                        {},// Chassis color is a default text column
                        {} // Bumper color is a default text column
                    ]
                });
        </script>
    </body>
</html>

enter image description here

结果如下

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

autocompletehandsontablepythonwebweb