keep ui autocomplete open at all times

Question

I'm using the ui autocomplete: over here

I need the autocomplete to be open at all times, so it shouldn't close when somewhere in the body is clicked. I have googled this but I couldn't find anything.

Answer 1

Hey sorry for the late response!

I feel this is a lot cleaner than keeping focus on the input and searching multiple times.

Try this...

JAVASCRIPT:

$( "#input1" ).autocomplete({
    source: availableTags,
    close : function (event, ui) {
        if (!$("ul.ui-autocomplete").is(":visible")) {
            $("ul.ui-autocomplete").show();
        }
    }
});

DEMO: http://jsfiddle.net/dirtyd77/AJtvJ/

Hope this helps!

Answer 2

here's a working example of how to do it : http://jsfiddle.net/4pk3V/

keep your autocomplete box open by searching the same input again whenever close event is triggered:

$( "#input" ).autocomplete({
    source: availableTags,

    close : function (event, ui) {
         val = $("#comment").val();
         $("#input").autocomplete( "search", val ); //keep autocomplete open by 
         //searching the same input again
         $("#input").focus();
        return false;  
    }
});

Answer 3

There is also a CSS only option:

<style>
    .ui-autocomplete { display: inline-block !important; }
</style>

Example: http://jsfiddle.net/Monstermensch/G7YYZ/1/

---

You should also add the following code to avoid problems if the browser is resized (source: Repositioning jQuery UI Autocomplete on browser resize):

$(window).resize(function () {
    $("#input1").autocomplete("search");
});

Answer 4

Here is an alternative solution: Add the following config to $input.autocomplete:

close: function (event, ui) {
  $input.autocomplete('widget').show();
}

In order to close the menu you need to add a click away handler. I found that the simplest way to do this is:

$input.on('blur', function () {
  $input.autocomplete('widget').hide();
});