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

Question

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.

Answer 1

The issue here is the way Internet Explorer handles the input event. The autocomplete menu is triggered on the input event of the input element (tags). https://github.com/jquery/jquery-ui/blob/master/ui/jquery.ui.autocomplete.js Line 167

If you place this code before your setTimeout

document.getElementById('tags').addEventListener('input',function(ev){alert(ev.target.value);},false);

You will see that ie's native input event is fired on focus of the element. This doesn't happen on chrome. So it's likely not a bug with jquery, rather a feature of ie. As you stated in your question, this only happens when the input element has a placeholder attribute, without the attribute, the input event doesnt fire on focus.

I tried to add a one event handler for focus to call preventDefault() before triggering focus, but that still caused the input event to fire.

The autofocus html5 attribute also still caused the input event to fire.

I tried wrapping your code in a proper html/head/body but that had no effect

Lastly, as a workaround

1) I defaulted the minLength property to 1

minLength: 1

2) In the setTimeout I set the option for minLength to 0

$("#tags").focus().autocomplete("minLength", 0);

This seems to work on ie 9.

Answer 2

The following code helped me to fix this problem:

  $("your tag").autocomplete({
   source:bla-bla,
   open:function(e,ui) /*Hack for IE11*/
   {            
     $(this).focus();
   }
   })
   .one("focus",function(){/*Hack for IE11*/
     $(this).blur(); 
   });

Shortly, widget calls focus for your tag, for the tag we make one-trigger function which is called only 1 time for focus getting lost by calling blur. Such a deceit for IE(bad IE).

Maybe there's a better solution. Please share it to this forum.

Answer 3

In

.autocomplete({
    delay: 0,
    //minLength: 0,
    minLength: 1,
    source: $.proxy(this, "_source")                         
})`

works on checkboxes as Sumit answered. It probably works on textboxes as well.

But if you use autocomplete on textbox and dont want use minlength solution you can use alternatively

$("your element or class tag").autocomplete("instance").menu.active = false; 

after textbox initialization jquery code. I couldnt see how this statement can be used on checkbox as used on textbox, if u know i am gladly listen it.