CODEWITHSUNDEEP
javascriptphphtmlarraysautocomplete
Whisou138
Whisou138

Reputation: 481

Array result, using in input for autocomplete

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>

Upvotes: 0

Views: 287

Answers (1)

Ryan Wilson
Ryan Wilson

Reputation: 10800

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

});

Upvotes: 1

Related Questions