Результат массива, использующий во входных данных для автозаполнения

Question

У меня есть массив, в который я добавляю объект stdClass с конечной точки API:

foreach($searchResults->hits as $arr){
 foreach ($arr as $obj) {
    $fullType = $obj->_source->categories;
    print_r($fullType);
 }
}

Что правильно возвращает мне правильный список. Проблема в том, что я запрашиваю конечную точку со значением "testProduct" в коде ha здесь:

$results = "testProduct";
$searchResults = $service->getSearch($results);

Таким образом, возвращается список продуктов, которые имеют что-то похожее на testProduct во всем объекте.

Моя проблема в том, что я пытаюсь заменить жестко закодированное значение входным значением. У меня есть вход на мой интерфейс:

<form class="uk-search" data-uk-search>
  <input class="uk-search-field" type="search" placeholder="search products...">
</form>

Я пытаюсь сделать здесь функцию автозаполнения, чтобы, когда пользователь вводил данные, я запускал $ searchResults и помещал $ fullType сверху в свой список результатов на входе.

Как я могу правильно сделать это?

UPDATE:

Когда я набираю ввод, моя консоль печатает при каждом нажатии клавиши, поэтому я знаю, что сообщение верное. Как мне сделать, чтобы он возвращал результаты $ searchResults? Скажем, я хотел console.log $ searchResults для каждого нажатия клавиши в вызове?

Controller.php

public function autoComplete(Request $request)
    {

      $search_result = $request->search_result;

      $service = new service();

      $searchResults = $service->getSearch($search_result);
    }

view.blade.php

    <script type="text/javascript">

    $('#productInput').on('input', function(){
        if($(this).val() === ''){
           return;
        }else{

           const searchResult = $(this).val(); 

           $.ajax({ url: '/account/autocomplete', 
                    data: {
                        'search_result':searchResult
                    },
                    type: "POST", 
                    success: function(response){
                        console.log("success");
                    }
                });
        }

    });
    </script>

Answer 1

Чтобы добавить обработчик события oninput в поле ввода с помощью JQuery:

//Place this in the $(document).ready() of your script
//Adds the event handler for input of the textbox
$('.uk-search-field').on('input', function(){
    //If there is no input yet, or they deleted the text, don't do anything
    if($(this).val() === ''){
       return;
    }else{
       //Call your server side method here, first get the value of the input box
       const searchValue = $(this).val(); //"this" refers to the input box at this point

       //to use ajax, see below
       $.ajax({ url: "yourServersideUrl", 
                type: "POST", 
                data: { serverSideMethodParameterName: searchValue}, //Data to pass to server 
                success: function(data){ //Deserialize data and populate drop down }, 
                error: function(jqXHR, exception){ //Handle exception } 
             }});
    }

});