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表中有大约20,000行。这太过分吗？我会在导航栏上将自动填充表单作为我的基础的一部分，因此每个页面实际上都会触发调用以获得所有该表的结果？

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

Answer 1

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

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

我不知道你正在使用的插件，但通常，自动完成通过在输入字段中发送字符（使用名为q的参数）来工作，服务器将通过搜索结果进行响应，通常以合理的尺寸修剪，比如100个或更少。

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

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

1 个答案: