HTML:
<input type="text" name="item" value="" id="item" class="input-xlarge" placeholder="Enter item name or scan barcode" accesskey="i" />
JavaScript:
$( "#item" ).autocomplete({
source: '<?php echo site_url("sales/item_search"); ?>',
delay: 10,
autoFocus: false,
minLength: 0,
select: function(event, ui)
{
event.preventDefault();
$( "#item" ).val(ui.item.value);
$('#add_item_form').ajaxSubmit({target: "#register_container", beforeSubmit: salesBeforeSubmit, success: itemScannedSuccess});
}
});
setTimeout(function(){$('#item').focus();}, 10);
当页面在 Internet Explorer 中加载时,自动完成会出现空术语值,从而产生一堆结果。如果我删除占位符属性,它会按预期运行,并且在键入之前不会发出请求。
如果我删除焦点事件,它也可以在 Internet Explorer 中运行。但我需要将焦点放在页面加载上,所以这并不是一个真正的选项。我还想保留占位符文本。
该元素在 safari、firefox 和 chrome 中按预期运行(在输入之前没有请求)。
这是一个错误吗?有没有解决方法可以使用占位符属性?
我整理了两个例子;损坏并修复。两者之间的唯一区别是占位符属性的存在(在损坏的版本中)。
损坏的浏览器仅在 IE 中损坏,并在其他浏览器中按预期运行。
注意:我所说的“损坏”是指当专注于字段时,自动完成功能会在不应该激活的情况下被激活。
http://blastohosting.com/jquery_ui_autocomplete_bug/broken.html http://blastohosting.com/jquery_ui_autocomplete_bug/broken.html
http://blastohosting.com/jquery_ui_autocomplete_bug/working.html http://blastohosting.com/jquery_ui_autocomplete_bug/working.html
注意:在这两个示例中,ajax 将始终得到相同的结果。请忽略这一点。