问题ajax加载与自动完成
problem ajax load with autocomplete.?
我创建了一个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;
}
下面是它的工作原理
相关文章:
- 无法在通过jQuery的ajax加载的页面中执行javascript
- 获取ajax加载的图像的大小
- 分页:如何用AJAX加载第一个页面
- 页面加载之前的jQuery Ajax加载程序
- ajax加载了内容,脚本没有执行
- 如何使用post和ajax加载视图Codeigniter
- $(select).selectmenu('打开')不'如果使用ajax加载页面,则不起作用
- ajax加载()后,包含图表的图像不会重新绘制
- 如果数据为空,Ajax加载不会停止
- 防止用户在jQuery Mobile中ajax加载页面时单击其他位置
- 将内容ajax加载到html弹出窗口中
- 导航栏和AJAX加载
- 用于各个元素的Ajax加载程序
- 通过AJAX加载页面并执行javascript和CSS
- 使用ajax加载页面的一部分
- 从表单中动态生成一个字符串,传递给通过AJAX加载的PHP文件
- 显示全屏Ajax加载程序的最佳方式
- 获取通过AJAX加载的元素
- 如何在rails应用程序中测试AJAX加载的内容
- 如何在Ajax加载新内容时停止JavaScript执行