Создать Live Search с laravel 5.7 и axios

Question

Я хочу создать живой поиск, используя laravel версия 5.7. Я много искал, но не смог найти решение. Я хочу поиск в табличных данных, который отображается с eloquent без ajax запроса, поэтому я хочу, чтобы поиск работал с ajax запросом. До сих пор я пытался использовать следующий код.

Табличные данные, которые отображается без ajax:

<table class="table">
      <thead>
        <tr>
          <th colspan="2" style="min-width:100px">
            <div class="thead-dd dropdown">
              <span class="custom-control custom-control-nolabel custom-checkbox">
                <input type="checkbox" class="custom-control-input" id="check-handle">
                <label class="custom-control-label" for="check-handle"></label>
              </span>
              <div class="thead-btn" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                <span class="caret"></span>
              </div>
              <span style="margin-left: 10px;">Added By</span>
              <div class="dropdown-arrow"></div>
              <div class="dropdown-menu">
                <a class="dropdown-item" href="#">Select all</a>
                <a class="dropdown-item" href="#">Unselect all</a>
                <div class="dropdown-divider"></div>
                <a class="dropdown-item" href="#">Bulk remove</a>
                <a class="dropdown-item" href="#">Bulk edit</a>
                <a class="dropdown-item" href="#">Separate actions</a>
              </div>
            </div>
          </th>
          <th> Caption </th>
          <th> Details</th>
          <th> Action </th>
        </tr>
      </thead>
      <tbody>
        @foreach($sliderImages as $slider)
          <tr>
             <td class="align-middle col-checker">
                <div class="custom-control custom-control-nolabel custom-checkbox">
                   <input type="checkbox" class="custom-control-input" name="selectedRow[]" id="p3">
                   <label class="custom-control-label" for="p3"></label>
                </div>
             </td>

            <td class="align-middle">
              <a href="#" style="margin-left: 10px;">{{ $slider->addedby}}</a>
            </td>
             <td class="text-justify">
                <a href="{{ route('show.slider-images',['id'=>$slider->id]) }}">{{ $value = str_limit($slider->caption, 35) }} </a>
             </td>
             <td><a href="{{ route('show.slider-images',['id'=>$slider->id]) }}" class="frmt-txt">Read More</a></td>
             <td class="align-middle text-right">

                <label class="switcher-control">
                <input type="checkbox" name="is_active" class="switcher-input" {{ $slider->is_active == 1 ? 'checked' : '' }} data-id="{{ $slider->id }}" value="{{ $slider->is_active }}">
                  <span class="switcher-indicator"></span>
                </label>

                <button type="button" href="#edit<?php echo $slider->id;?>" class="btn btn-sm btn-secondary" data-toggle="modal" data-target="#edit<?php echo $slider->id;?>">
                   <i class="fa fa-pencil-alt"></i>
                   <span class="sr-only">Edit</span>
                </button>
                <button type="button" href="#delete<?php echo $slider->id;?>" class="btn btn-sm btn-secondary" data-toggle="modal" data-target="#delete<?php echo $slider->id;?>">
                   <i class="far fa-trash-alt"></i>
                   <span class="sr-only">Remove</span>
                </button>
             </td>
          </tr>

          @include('backend.includes.modals.edit-slider-modal')  
          @include('backend.includes.modals.delete-slider-modal')

        @endforeach
      </tbody>       
    </table>

Ax ios запрос в блейд-файле:

$('#searchSliderImage').keyup(function(evt) {
    evt.preventDefault();
    var searchVal    = $(this).val().toLowerCase();
    if (searchVal.length > 0) {
      var cur_url="<?php echo route('add.slider-images');?>";
      var url  = "<?php echo route('slider.search');?>";
      axios({
        method: 'POST',
        url: url,
        data: {
          searchVal: searchVal,
        }
      })
      .then(function(res){
        var good  = res.data.Good;
        if (good===true) {
          var arr = res.data.data;
          var table  = document.querySelector("#tblSlides");
        }
      })
    } else {
      alert('Search could not be empty');
    }
  });

Метод контроллера для поиска с топором ios запрос:

public function sliderSearch(Request $request) {
      $searchVal  = $request->searchVal;
      $searchRecors = DB::table('slider_tbs')
                      ->select('slider_tbs.*')
                      ->where('slider_tbs.caption','LIKE','%'.$searchVal."%")
                      ->orWhere('slider_tbs.body','LIKE','%'.$searchVal."%")
                      ->get();
    $data = array();
      if(count($searchRecors) > 0)
      {
        foreach ($searchRecors as $search)
        {
          $nestedData['id']             = $search->id;
          $nestedData['caption']  = $search->caption;
          $nestedData['body']           = $search->body;
          $nestedData['link']         = $search->link;
          $nestedData['img']         = $search->img;
          $data[] = $nestedData;

          $json_data = array(
          "Good" => true,
          "Message" => 'Data Found Successfully',
          "data" => $data
        );
      }
       echo json_encode($json_data);
    }
    else
      {
        $json_data = array(
          "Good" => false,
          "Message" => 'No result found',
        );
        echo json_encode($json_data); 
      }
    }

Как показать основанные записи с запросом ax ios и скрыть остальные, отображаемые в таблице?