Как отобразить автоматический список товаров, относящихся к этой категории Когда я пишу название категории в строке поиска, используя laravel?

Question

Я хочу показать список товаров, связанных с категорией. Когда я пишу название категории в строке поиска, должен быть показан список продуктов, как это сделать? Пожалуйста, помогите мне спасибо.

Я хочу показать список продуктов, как это, пожалуйста, см. изображение. https://i.stack.imgur.com/wP1CS.png

Это моя строка поиска, см. https://i.stack.imgur.com/GHPOC.png

Контроллер

              public function searchproduct(Request $request)
               {
             $query = $request->input('search');
             $productcate = DB::table('products')
            ->join('category', 'category.id', '=', 'products.cate_id')
            ->where('product_name', 'LIKE', '%' . $query . '%')
             ->orwhere('product_description', 'LIKE', '%' . $query . '%')
             ->orwhere('cate_name', 'LIKE', '%' . $query . '%')
             ->get();

         return view('front_end.products', compact('productcate '));
           }

html просмотр

         <form class="search__form" action="{{route('search.action')}}" method="post" >
         @csrf
        <input class="search__input" name="search" placeholder="Search over 10,000 products" aria-
        label="Site search" type="text" autocomplete="off">
        <button class="search__button" type="submit">
       <svg width="20px" height="20px">
        <use xlink:href="{{url('public/assets/images/sprite.svg#search-20')}}"></use>
        </svg>
       </button>
       <div class="search__border"></div>
       <div class="product__serach__list">
       <!-- product list will be shown inside this div  -->
       <div id="searchresult" style="background:#fff;border:1px solid #d5d5d5;position: 
        absolute;top: 
       40px;right:0;min-width:100%; display:none;">
        // product list show //
        <span>Search</span>
       </div>
         </div>
        </form>

Answer 1

Я думаю, вам нужна функция HTML5 datalist .

Элемент HTML <datalist> содержит набор элементов <option>, которые отображать допустимые или рекомендуемые параметры, доступные для выбора в других элементах управления.

Так что, если в вашей области поиска искались различные типы браузеров:

<form action="/action_page.php" method="get">
 <input list="browsers" name="browser">
  <datalist id="browsers">
    <option value="Internet Explorer">
    <option value="Firefox">
    <option value="Chrome">
    <option value="Opera">
    <option value="Safari">
  </datalist>
 <input type="submit">
</form>

Вам потребуется предоставить данные со стороны вашего сервера (или жесткий код на странице html, как я сделал в этом ответе), но когда пользователь пишет несколько букв имени браузера в строке поиска, список продуктов должен отображаться, как вы просьба.