如何在html中的文本框上显示自动完成jquery ui

Question

这是我的代码： 我从ajax获取值并将其显示为自动完成。我在stackoverflow中尝试了很多解决方案。但我没有得到这个。请有人帮助我从中恢复：

   $(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);
            }
        });
    });

提前致谢