HTML:
<input type="text" name="item" value="" id="item" class="input-xlarge" placeholder="Enter item name or scan barcode" accesskey="i" />
Run Code Online (Sandbox Code Playgroud)
使用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);
Run Code Online (Sandbox Code Playgroud)
当页面在Internet Explorer中加载时,自动完成会发生一个空的术语值,从而导致一堆结果.如果我删除占位符属性,它将按预期运行,并且在键入发生之前不会发出请求.
如果我删除焦点事件,它也适用于Internet Explorer.但我需要关注页面加载,所以这不是一个真正的选择.我还想保留占位符文本.
该元素在safari,firefox和chrome中按预期运行(在键入之前没有请求).
这是一个错误吗?有没有解决方法,所以我可以使用占位符属性?
我把两个例子放在一起; 破碎和固定.2之间的唯一区别是占位符属性的存在(在损坏的版本中).
破坏的只在IE中中断,并在其他浏览器中按预期运行.
注意:通过破碎我的意思是当聚焦在字段上时,自动完成功能会被激活.
http://blastohosting.com/jquery_ui_autocomplete_bug/broken.html
http://blastohosting.com/jquery_ui_autocomplete_bug/working.html
注意:在这两个示例中,ajax始终是相同的结果.请忽略这一点.