Array result, using in input for autocomplete

Question

I have an array where I'm lopping on an stdClass object from an API endpoint:

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

Which is properly returning a correct list for me. The problem is, I'm querying the endpoint with a ha rdcoded value "testProduct" here:

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

So this returns a list of products that have anything similar to testProduct in the entire object.

My issue is, I'm trying to replace the hardcoded value with an input value. I have an input on my front-end:

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

I'm trying to do an autocomplete function here so that as the user types in the input I run the $searchResults, and I would be putting the $fullType from above in my list of results in the input.

How can I properly do this?

UPDATE:

When I type in the input, my console prints success for each keystroke so I know the post is correct. How should I handle making it return the results of $searchResults though? Say I wanted to console.log $searchResults for each keystroke in the call?

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>

If I am understanding your desired behavior, you want to send some input value to the server to filter down some results returned from an API, if you want to do this on every key stroke of input on the textbox, you need to attach an event listener to the input for the event oninput, inside the event handler function, pass the value of the input box to the server via ajax, and on success of ajax, append the results to a unlinked list or drop down for selection. — Ryan Wilson, Aug 27 '18 at 20:45
Ok. Glad to hear it, here are some links which may help using oninput event (https://stackoverflow.com/questions/6458840/detecting-input-change-in-jquery) , How to use Ajax to call a php method (https://stackoverflow.com/questions/2269307/using-jquery-ajax-to-call-a-php-function). If you need anymore assistance after looking at those, let me know, I can probably put together an example for you. — Ryan Wilson, Aug 27 '18 at 23:42
I've looked through those and I can see how that could work but an example would be amazing if possible. Basically, I just want my input value (on change) to call $searchResults as the value it's passing but then the array that has $fullType, would be filling in the dropdown list — Whisou138, Aug 28 '18 at 01:03

Ryan Wilson · Accepted Answer · 2018-08-28T12:18:40.147

To add the oninput event handler to your input box using 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 } 
             }});
    }

});

Array result, using in input for autocomplete

1 Answers1