Вывод результатов поиска товаров через ajax прямо в строке поиска!

[support 447]

В данной небольшой заметке расскажу как сделать вывод результатов поиска товаров прямо рядом со строкой поиска.

Без перезагрузки страницы, через ajax.

Вот как это будет выглядеть, смотрите скриншоты:

При вводе ключевых слов для поиска в форме, результат отображается сразу, без перезагрузки страницы в браузере.

Как это сделать?!

1. Открываем основной шаблон магазина в Админке - Оформление - Шаблоны - Основной шаблон и ищем код формы поиска:

     <form class="navbar-form navbar-left" role="search" action="{base_path}/page/search-result{config value=url_extension}" method="get" id="search">
       <div class="input-group">
           <input type="text" class="form-control" placeholder="{lang}Search{/lang}" name="keyword" id="search-keywords">
           <div class="input-group-btn">
               <button class="btn btn-primary" type="submit"><i class="fa fa-search"></i></button>
           </div>
       </div>
       <div id="searchPreview"></div>
     </form>

меняем его на:

     <form class="navbar-form navbar-left" role="search" action="{base_path}/page/search-result{config value=url_extension}" method="get" id="search">
       <div class="input-group">
           <input type="text" class="form-control" placeholder="{lang}Search{/lang}" name="keyword" id="search-keywords">
           <div class="input-group-btn">
               <button class="btn btn-primary" type="submit"><i class="fa fa-search"></i></button>
           </div>
       </div>
       <div id="searchPreview"></div>
     </form>

 
Что изменилось:     

Мы добавили атрибут id="search" в саму форму.
Добавили атрибут id="search-keywords" input полю.
Добавили блок с id="searchPreview" для вывода результатов поиска.

2. Открываем файл /app/webroot/js/vamshop.js и ищем строку:

// Ajax cart

добавляем НАД этой строкой следующий код:

// Search Preview

  $("#search-keywords").keyup(function(){
      var action = $("#search").attr("action");
      var searchString = $("#search-keywords").val(); 
      $.ajax({
          url: "/site/search_preview",             
          dataType : "html",
          type: "POST",
          data: "keyword="+searchString,
          success: function(msg){$("#searchPreview").html(msg);}            
 });   
 });

 
3. Открываем файл /app/Controller/SiteController.php и внизу, НАД последней скобкой } добавляем следующий код:

    public function search_preview () {
        // Clean up the post
        App::uses('Sanitize', 'Utility');
        $clean = new Sanitize();
        $clean->paranoid($_POST);

        $_GET['keyword'] = $_POST['keyword']; 

    if ($this->RequestHandler->isAjax()) {
        $this->Smarty->display("{search_result}");
        die();
    } 
        
    }

    
4. Открываем файл стилей /app/webroot/css/vamshop.css и внизу добавляем:

#searchPreview {
    position: absolute;
    z-index: 999999;
    width: 50%;
    height: auto;
    overflow-y: hidden;
    overflow-x: hidden;
    background: #fff; 
}

Всё.

Теперь у нас результаты поиска выводятся прямо под строкой поиска, без перезагрузки страницы.

Как на скриншотах: