Question

我有一个使用jQuery的自动完成脚本，可以在http://example.com/autocomplete?term=[blah]下查询我网站的自动完成API。

<script type="text/javascript">
    $(function()
    {
        $.ui.autocomplete.prototype._renderItem = function( ul, item){
            var term = this.term.split(' ').join('|');
            var re = new RegExp("(" + term + ")", "gi") ;
            var t = item.label.replace(re,"<b>$1</b>");
            return $( "<li></li>" )
                    .data( "item.autocomplete", item )
                    .append( "<a>" + t + "</a>" )
                    .appendTo( ul );
        };
        $( "#q" ).autocomplete({
            source: '{{ URL('autocomplete') }}',
            minLength: 3,
            delay: 0,
            select: function(event, ui) {
                $('#q').val(ui.item.value);
            }
        });
    });
</script>

查询速度很慢 - 查看分析器的范围是100 ms到700 ms，这太慢了。这背后的原因是，它每次输入时都会查询我的API。

我正在考虑页面加载我只想下载所有结果（通过向term=发送空值，以JSON格式返回所有结果）到数组，并且{{1所有都在页面加载时加载到客户端。

然而..我对前端编程很新，我不知道如何开始。

Answer 1

以下代码发出AJAX请求以从我的API获取自动完成列表。它返回所有1600行数据。页面的加载时间可能有点慢..但自动完成很快。

    // once page loads, make AJAX request to get your autocomplete list and apply to HTML
    $.ajax({ url: '{{ URL('autocomplete') }}',
        type: "GET",
        contentType: "application/json",
        success: function(tags) {
            $( "#q" ).autocomplete({
                source: tags,
                minLength: 3,
                delay: 0,
                select: function(event, ui) {
                    $('#q').val(ui.item.value);
                }
            });
        }
    });

在jQuery自动完成中将JSON API的所有结果加载到页面加载的源变量中

1 个答案: