jQuery UI autocomplete triggered on field focus in Internet Explorer when there is an html 5 placeholder attribute

user_627473 0
Viewed 8764

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);

When the page loads in Internet explorer the autocomplete occurs with an empty term value resulting in a bunch of results. If I remove the placeholder attribute, it functions as expected and does NOT make a request until typing occurs.

If I remove the focus event it also works in Internet Explorer. But I need to have the focus occur on page load, so this is not really an options. I would also like to keep the placeholder text.

The element functions as expected (no request until typing) in safari, firefox and chrome.

Is this a bug? Is there a workaround so I can use placeholder attribute?

I have put together 2 examples; broken and fixed. The only difference between the 2 is the presence of the placeholder attribute (in the broken version).

The broken one only breaks in IE and functions as expected in other browsers.

NOTE: by broken I mean when focusing on field the autocomplete is activated when it shouldn't.

http://blastohosting.com/jquery_ui_autocomplete_bug/broken.html

http://blastohosting.com/jquery_ui_autocomplete_bug/working.html

NOTE: In both these examples the ajax will always be the same result. Please ignore this.

jquery-ui jquery
6 Answers

here is my lazy initial way

elm.focus(function () {
    if(elm.autocomplete("instance")){
        elm.autocomplete(opts);
    }
});
user_40160140
Related