自动完成json对象中的数据

Question

我有一个搜索输入，当用户开始打字时，我试图用json对象中的数据自动完成搜索。使用Ajax和自动完成的jQuery

图片供参考：https://ibb.co/WBLpgRR

这就是我期望发生的事情（在这种情况下，它是有效的，因为我使用我在本地设置的对象数组更改了ajax的来源）：https://ibb.co/MPsCZ0C

我尝试使用自动完成的jquery和ajax函数作为源。

这是输入的html

<input id="searcher-hero" type="text" placeholder="Search Term" name="keywords" class="ui-autocomplete-input" autocomplete="off">

这是javascript：

$( "#searcher-hero" ).autocomplete({
        source: function( request, response ) {
            $.ajax( {
                url: "{{cant show link}}ajax_search_result?keywords=happy",
                dataType: "json",
                data: {
                    searchText: request.term
                },
                success: function( data ) {
                    response( data );
                }
            });
        },
        minLength: 0,
        select: function (event, ui) {
            if (ui.item) {
                $(event.target).val(ui.item.value);
                $("#search-hero-form").submit();
            }
        }
    }).click(function() {
        $(this).autocomplete("search", $(this).val());
    });

问题是，当我在搜索字段中键入内容时，没有任何显示。而且我希望来自该json对象的数据能够自动完成