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
– Ryan Wilson, Commented Aug 27, 2018 at 20:45
Ok. Glad to hear it, here are some links which may help using oninput event (stackoverflow.com/questions/6458840/…) , How to use Ajax to call a php method (stackoverflow.com/questions/2269307/…). If you need anymore assistance after looking at those, let me know, I can probably put together an example for you. — Ryan Wilson
– Ryan Wilson, Commented Aug 27, 2018 at 23:42

Ryan Wilson · Accepted Answer · 2018-08-28 12:18:40Z

1

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

});

edited Aug 28, 2018 at 12:18

answered Aug 28, 2018 at 12:07

Ryan Wilson

10.9k3 gold badges23 silver badges46 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Array result, using in input for autocomplete

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related