Создание живого поиска

Пример для ознакомления.

Для автокомплита результатов используется плагин: jquery.autocomplete.js.

CSS прописывается по вкусу.

/search_suggestions.json

Параметры:

account_id: 225801 - id аккаунта магазина.
locale: ru - текущая локаль сайта.
hide_items_out_of_stock: скрывать товары которых нет на складе?
query: машинка - поисковая фраза

Liquid

        
          <form action="/search" method="get" class="search-form">
  <input name="q" type="text" placeholder="поиск" class="search-input js-search-input">
  <div class="autocomplete-suggestions"></div>
</form>
<script type="text/javascript">
jQuery(document).ready(function($) {
  //Поиск
  $('.js-search-input').autocomplete({
    serviceUrl: '/search_suggestions',
    onSelect: function (suggestion) {
      window.location.href = '/product_by_id/' + suggestion.data;
    },
    params: {
      account_id: {{ account.id }},
      locale:'{{ language.locale }}',
      hide_items_out_of_stock: true
    },
  });
});
</script>