Question

我有一个数组，可以从API端点放到stdClass对象上

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

哪个正确地为我返回了正确的列表。问题是，我在这里用编码值“ testProduct”查询端点：

$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从上方放入结果列表中。

如何正确执行此操作？

更新：

当我输入输入内容时，我的控制台将为每次击键打印成功，因此我知道该帖子是正确的。我应该如何处理使其返回$ 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

要使用JQuery将oninput事件处理程序添加到输入框：

//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 } 
             }});
    }

});

数组结果，用于自动完成输入

1 个答案: