jQuery UI autocomplete with IE 11 - wired behavior

Question

I want to set autocomplete field. So I wrote

$(document).ready(function() {
    $("#mytext").autocomplete({
         source: function(request, response) {
            $.getJSON("/ajax/autocomplete.php?term=" + $.trim(request.term), function(data) {
                response($.map(data, function(item) {
                    return {label: highlightResult(item.label, $.trim(request.term))};
                }));
            });
        },
        minLength: 0
    }).each(function() {
        $(this).data("ui-autocomplete")._renderItem = function(ul, item) {
            return $("<li></li>")
                    .data("item.autocomplete", item)
                    .append("<a>" + item.label + "</a>")
                    .appendTo(ul);
        };
    });
    ...
    $("#mytext").focusin(function() {
        $(this).autocomplete("search", $(this).val());
    });
});

With the HTML:

<div style="visibility: hidden;"/>
    <input type="text" id="mytext" />
</div>
<button onclick="showDiv();">Click To Show</button>

This code works fine on Google Chrome. But its works weird on IE 11.

The input is hidden by default, but it will appeared when the button will be clicked.

The weird behavior:
1) On refresh the autocomplete menu appears in the top-left corner of the window (the body).
2) The menu not showing when there is text in the text box. I see that the data parameter is sometimes (when there is a text), undefined - wierd...

What can I do with these problems? I didn't find any helpful solution.

Answer 1

Another possibility is to create the autocomplete with option

disabled: true

And to enable it once it is required

Answer 2

I have exactly the same problem. Some autocomplete shows after page refresh. Not sure why that happens, because i have a lot of them at the form, and bug happens only with few controls.
Another way to fix it as Marc Thomann said - disable autocomplete and (my trick) add

$(document).ready(function() {
...
/**** that is last line ***//
if (msieversion() === 11) {setTimeout(enable_autocomplete, 200);} 

// function enable_autocomplete() contains $(".my_selector").autocomplete("option", "disabled", false); });

So my code is:

var autocomplete_options = {/** your usual options **/};
if (msieversion() === 11) {
 autocomplete_options.disabled = true;
};
$("#mytext").autocomplete(autocomplete_options);

Answer 3

When an element has its visibility set to hidden, IE won't process events for it, so when the DOM is ready, it tries to attach the event to something that can't receive events, causing undefined behaviour. Instead of using $(document).ready(), use the autocomplete call in your showDiv function