How to remove filter criteria and display data on focus of a Text Input field when using Jquery Autocomplete feature

Question

This is a program which is responsible to display autosuggestions .

When i keep the focus inside the tags input field , it should display all the available data present inside the source , (i don't need any filter criteria )

On focus of the text input field it should display all the data

This is my jsfiddle

http://jsfiddle.net/n30bku6v/1/

$(document).on('focus', '#tags', function() {
    $( "#tags" ).autocomplete({
      source: availableTags
    });
});    

Could you please tell me how to do this

Answer 1

I think first of all you should bring your autocomplete initialization out of onFocus callback, so it won't initialize on each focus event.

To achieve your desired behavior, you could use minLength property and search method, like this:

$(function(){
    $("#tags").autocomplete({
        source: availableTags,
        minLength: 0
    });

    $(document).on('focus', '#tags', function() {
        $("#tags").autocomplete("search","");
    });    
});

Using minLength we say to autocomplete to work even when there is no query, and search method is used to trigger autocomplete with empty query.

Working demo.