L5.8 Product Filter Ajax Help Please

Hi everyone. I dont do alot of ajax and i was wondering if someone could show me how to use a select field with categories to filter the products on the page without reloading it.

Please make it as simple as possible as I am trying to learn how it works.

My select field on index.blade.php :

<ul style="list-style:none;">
    <li>
        <select id="catInput">
            <option value="">Select a Category</option>
            @foreach($pc as $cat)
                <option value="{{$cat->id}}">{{$cat->name}}</option>
            @endforeach
        </select>
    </li>
    <li>
        <button id="findBtn">Find</button>
    </li>
</ul>

My JS on the index.blade.php page:

<script type="text/javascript">
  (function($) {
    $("select#catInput").change(function(){
          $.ajax({
              headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') },
              type: 'post',
              dataType: "json",
              url: "{{ url('products')}}",
              data: {
                'category': $(this).val()
             },
             success: function(data) {
                alert(data);
                  $("#filter").empty().html(data);
              },
              fail: function(jqXHR, ajaxOptions, thrownError) {
                  console.log('No response from server');
              }
          });
      });
  }).apply(this, [jQuery]);

</script>

MY routes:

Route::get('products/{pruduct:slug}', 'ProductsController@show')->name('products.show');
Route::resource('products', 'ProductsController', ['except' => ['create', 'store', 'edit', 'update', 'destroy']]);

My controller index :

    public function index(Request $request)
    {
        // this provides the list of categories for the select field
        $pc = ProductCategory::whereHas('products', function($query) use($request) {
            $query->whereNotIn('type', ['service', 'code']);
        })->get();

        $products = (new Product)->newQuery();

        $category = [];

        if($request->ajax()) {

            if($request->has('category')){

                // this retrieves the category id from the request 
                // ex: /products?category=38

                $category = $request->category;

                    // this grabs all the products in the category with id of 38

                $products = Product::whereHas('product_categories', function($query) use($request){
                    $query->where('id', $category);
                });

                $products = collect($products);

                $count = $products->count();
        
                    // this is a simple flash alert of the number of products found in that category
                flash('$count Products Found Under This Category!')->warning();
 
                // THIS IS WHERE I NEED HELP I HAVE NO IDEA 
              // HOW TO MAKE THE NEW LIST OF PRODUCTS 
              // REPLACE THE CURRENT PRODUCTS ON THE PAGE

            }
        }
        return view('site.products.index', compact('products','pc'));
    }

MY Index page Loops:

@if(empty($products))
    <div class="tab-pane" id="filter">
        No products in this category. Sorry.
    </div>
@else


<div class="tab-pane" id="filter">
    <div class="mt-4 pt-2">
        <div class="row team-list" data-sort-id="">

            @foreach($products as $product)
                <div class="col-12 col-sm-6 col-lg-3 isotope-item product-tile">
               
                    <span class="thumb-info thumb-info-hide-wrapper-bg mb-4">
                       <span class="thumb-info-wrapper">
                       <a itemprop="url" href="{{ url('products', $product->slug) }}">
                          @if(isset($product->photo))
                               <img itemprop="image" src="{{ $product->getFirstMediaUrl('photo', 'product') }}" class="img-fluid" alt="{{ $product->name }} image">                                                  
                           @endif
                          <span class="thumb-info-title lightbackground" style="">
                             <span itemprop="name" class="thumb-info-inner">{{ $product->name }}</span>
                       
                       </a>
                       </span>
                    </span>
                </div>
            @endforeach

        </div>
    </div>
</div>
@endif