我是否正确使用了 JQuery 的自动完成功能？它可以处理多少数据？

Question

我的 html 是

<form style="display: inline;" action="{{ url_for('autocompresults') }}" method="post" name="search">
{{ form.hidden_tag() }}
{{ form.autocomp.label }}: {{ form.autocomp }}
<button class = "btn " type="submit" >Search</button>
</form>

<script>
$(function() {
    $.ajax({
        url: '{{ url_for("autotestGETTER") }}'
        }).done(function (data) {
            $('#myautocomplete').autocomplete({
                source: data.json_list,
                minLength: 1,
                 select: function(event, ui) {
        //assign value back to the form element
        if(ui.item){
            $(event.target).val(ui.item.value);
        }
        //submit the form
        $(event.target.form).submit();
    }
            });
        });
    });
</script>

在我的 views.py 我有

@app.route('/autotestGETTER', methods=['GET'])
def autotestGETTER():
    res=[]
    products = models.Product.query.all()
    for p in products:
        res.append(p.title)
    return jsonify(json_list=res)

这按原样正常工作。我的 Product table 中有大约 20,000 行。这过分了吗？我会将导航栏上的自动完成表单作为我的基础的一部分，因此每个页面实际上都会触发一个调用以获取 all table?[=15= 的结果]

在我开始实施之前，我假设数据查找只会在输入几个字符后发生，并且查询会根据这些字符进行过滤。但看起来 JQuery 的自动完成功能实际上进行了过滤？

Answer 1

从服务器的角度来看，这根本不是最佳选择，但可以毫无问题地处理它。

但从客户的角度来看，这可能是个问题。想象一个移动设备。处理 20k 行的 JSON 解析将是 cpu 密集的，网页会很慢。

我不知道您使用的是什么插件，但通常情况下，自动完成功能会通过在输入字段中发送字符（使用名为 q 的参数）来工作，服务器将响应搜索结果，通常以合理的大小修剪，比如 100 个元素或更少。

PS：提示，您可以使用列表理解稍微优化结果列表：res = [p.title for p in products]

我是否正确使用了 JQuery 的自动完成功能？它可以处理多少数据？

Am I using JQuery's autocomplete correctly? How much data can it handle?

jquery

flask