У меня есть поисковый ввод, и я пытаюсь автоматически заполнить его данными из объекта json, когда пользователь начинает печатать. Использование ajax и автозаполнение jquery

Изображение для справки: https://ibb.co/WBLpgRR

и это то, что я ожидаю, что произойдет (в этом случае это работает, потому что я изменил источник ajax с массивом объекта, который я сделал локальным): https://ibb.co/MPsCZ0C

Я попытался использовать автозаполнение JQuery и AJAX функции в качестве источника.

это HTML для ввода:

{amp}lt;input id="searcher-hero" type="text" placeholder="Search Term" name="keywords" class="ui-autocomplete-input" autocomplete="off"{amp}gt; 

это 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 появятся как автозаполнение