How to show autocomplete jquery ui on textbox in html

Question

This is my code: I am getting the values from ajax and showing its as autocomplete. I tried lot of solutions in stackoverflow. But i didn't get this. Please some one help me to recover from this:

   $(document).on("change", "#selectbox-city-list2", function(){
        $("#inputArea").val('');
        $("#inputAreaCtrl").val('');
        $.ajax({
            url: "<?= BASE_URL ?>/shop/area.html",
            type: "get",
            data: {city_key: $("#selectbox-city-list2").val()},
            dataType: "json",
            success: function(data){
                $options = [];
                $.each(data, function(i, field){
                    $option = {"label":field.location, "value": field.area_key};
                    $options.push($option);
                });

                $("#inputArea").autocomplete({
                    source: $options,
                    select: function(event, ui){
                        $("#inputArea").val(ui.item.label);
                        $("#inputAreaCtrl").val(ui.item.value);
                        return false;
                    }.focus(function(){
                        if($("ul.ui-autocomplete").is(":hidden"))
                        {
                            $(this).autocomplete('search', ''); //tried this
                             $("ul.ui-autocomplete").show(); //tried this
                           //But no luck
                        }
                    });
                });
            },
            error: function(xhr, error, status){
                alert(status);
            }
        });
    });

Thanks in advance

Answer 1

I got the answer just added minLength: 0 in autocomplete function

   $("#inputArea").autocomplete({
                    source: $options,
                    select: function(event, ui){
                        $("#inputArea").val(ui.item.label);
                        $("#inputAreaCtrl").val(ui.item.value);
                        return false;
                    },
                    minLength: 0
                });