Simple js fiddle. JQuery programmatically opened autocomplete DD will not close properly

Question

JQuery programmatically opened autocomplete DD will not close properly.

Simple js fiddle.

  $("#auto").autocomplete({ 
        source: ['hi', 'bye', 'foo', 'bar'],
        minLength: 0
    }).on("focus", function () {
        $(this).autocomplete("search", '');
    });

---

<input type="text" id="auto" />

<button runat="server" id="openButton" onclick="$(auto).autocomplete('search', '');"  > OpenMenu </button>

if you hit the open menu button, you cannot close it in the normal manner.

http://jsfiddle.net/8C9xj/

I don't want to use this one, because it's not working well with my updatepanels in ASP.NET

Answer 1

nnnnnn 's answer worked for my simple jsFiddle example, but the control lived in an DataGrid, and some of the rows were actually after page load and were contained within an ASP.NET UpdatePanel.

I ultimately had to employ code from the following answer. https://stackoverflow.com/a/10301326/73804 http://jsfiddle.net/j08691/c7xKU/8/

<input type="text" id="txtComplete" />

---

var input = $('#txtComplete');

var data = [];
var isOpen = false;

function _init() {
    for (var idx = 0; idx <= 100; idx++) {
        data.push('item: ' + idx);
    };
    input.autocomplete({
        source: data,
        minLength: 0,
        open: function(event, ui) {
            isOpen = true;
        },
        select: function(event, ui) {
            isOpen = false;
        }
    });
}

function afterInit() {
    var button = $("<button type='button'>&nbsp;</button>").attr("tabIndex", -1).attr("title", "Show all items").insertAfter(input).button({
        icons: {
            primary: "ui-icon-triangle-1-s"
        },
        text: false
    }).removeClass("ui-corner-all").addClass("ui-corner-right ui-button-icon").click(function(event) {
        input.focus();
        if (isOpen) {

            input.autocomplete("close");
            isOpen = false;
        } else {
            input.autocomplete("search", "");
            event.stopImmediatePropagation();
        }
    });
}
$(window).click(function() {
    input.autocomplete("close");
    isOpen = false;
});
$(function() {
    _init();
    afterInit();
});

Answer 2

I don't know quite why your current code doesn't work, but if you change the click handler of the button to trigger a focus event on the input (which in turn calls your existing focus handler) it seems to fix it, I think because the drop-down automatically closes when the input loses focus again after that:

$("#openButton").click(function() {
    $('#auto').focus();
});

Updated demo: http://jsfiddle.net/8C9xj/2/

Note that I've removed the inline onclick="..." handler from your button's html and instead bound the click handler with jQuery - not essential for this solution to work, but tidier.