添加负载搜索微调器

时间:2019-08-09 08:40:17

标签: javascript jquery ajax

我正在使用Ajax搜索城市和位置,我面临两个主要问题 第一个查询持续5秒,非常慢 我不知道如何在搜索发生时增加等待时间 这是代码的一部分

 $('#firstadress').autocomplete({
        serviceUrl: '/autosearch',
        onSearchStart: function (suggestion) {
            $(this).addClass('searching');
         /* here where I want to added code */

        },
        onSearchComplete: function (suggestion) {
            $(this).removeClass('searching');
        },

预先感谢

1 个答案:

答案 0 :(得分:0)

您需要在搜索功能中添加加载程序,并在自动完成功能中已经存在的响应功能中将其删除。

<style type="text/css">
    .loader
    {
        background: url(loader.gif); // you loader url
        background-repeat: no-repeat;
        background-position: right;
    }
</style>

<script type="text/javascript">
    $(function () {
        $("#txtSearch").autocomplete({
            source: function (request, response) {
                $.ajax({
                    url: 'url',
                    data: "{ 'prefix': '" + request.term + "'}",
                    dataType: "json",
                    type: "POST",
                    contentType: "application/json; charset=utf-8",
                    success: function (data) {
                        response($.map(data.d, function (item) {
                            return {
                                label: item.split('-')[0],
                                val: item.split('-')[1]
                            }
                        }))
                    }
                });
            },
            search: function (e, u) {
                $(this).addClass('loader');
            },
            response: function (e, u) {
                $(this).removeClass('loader');
            }
        });
    });
</script>
Enter search term: <input type="text" id="txtSearch" />