问题ajax加载与自动完成

problem ajax load with autocomplete.?

本文关键字:ajax 加载 问题      更新时间:2023-09-26

我创建了一个jquery自动完成它的工作,但加载LOADING...后,Backspace删除值不工作。它不隐藏,仍然是显示。

如何在被Backspace移除值后,隐藏LOADING... ?

示例:请点击链接查看问题

我的完整代码:

$(document).ready(function () {
/// LOADING... ///////////////////////////////////////////////////////////////////////////////////////
    $('#loadingDiv')
    .hide()  // hide it initially
    .ajaxStart(function() {
        $(this).show();
    })
    .ajaxStop(function() {
        $(this).hide();
    });
/// autocomplete /////////////////////////////////////////////////////////////////////////////////////////            
    $('.auto_complete').keyup(function () {
        var specific = '.' + $(this).closest('div.auto_box').find('b').attr('class');
        var cl_list = '.' + $(this).closest('div.auto_box').find('ul').attr('class');        
        var id = '#' + this.id;
        var url = $(id).attr('class');
        var dataObj = $(this).closest('form').serialize();
        $.ajax({
            type: "POST",
            dataType: 'json',
            url: url,
            data: dataObj,
            cache: false,            
            success: function (data) {
                //alert(url)
                var cl_list = '.' + $('.auto_box '+ specific +' ul').attr('class');
                var id_name = $(cl_list).attr('id');
                $(cl_list).show().html('');
                if (data == 0) {
                    $(cl_list).show().html('<p><b>There is no</b></p>');
                }
                else {
                    $.each(data, function (a, b) {
                        //alert(b.name)
                        $('<p id="' + b.name + '">' + b.name + '</p>').appendTo(cl_list);
                    });
                    $(cl_list + ' p').click(function (e) {
                        e.preventDefault();
                        var ac = $(this).attr('id');
                        $('<b>' + ac + '، <input type="text" name="'+id_name+'[]" value="' + ac + '" style="border: none; display: none;" /></b>').appendTo($('.auto_box ' + specific + ' span'));
                        $(this).remove();
                        return false;
                    });
                    $('.auto_box span b').live('click', function (e) {
                        e.preventDefault();
                        $(this).remove();
                        return false;
                    });
                }        
                if ($(specific + ' input').val() == '') {
                    $(cl_list + " p").hide().remove();
                    $(cl_list).css('display','none');
                    $(".list_name").show().html('');
                };
                $('body').click(function () {
                    $(cl_list + " p").hide().remove();
                    $('.auto_complete').val('');
                    $(cl_list).show().html('');
                    $(cl_list).css('display','none')
                });
            },
            "error": function (x, y, z) {
                // callback to run if an error occurs
                alert("An error has occured:'n" + x + "'n" + y + "'n" + z);
            }
        });
    });
});

我建议您下次在链接中发布代码示例时使用jsfiddle。

无所谓。"loading"消息保持在那里,因为没有回退到结果的空值。

一个快速修复可以只是通过测试,有一个值在输入之前做任何帖子,如if(this.value == ""){ $(cl_list).css('display', 'none'); return false; }

下面是它的工作原理