Пример для ознакомления.
Для автокомплита результатов используется плагин: jquery.autocomplete.js.
CSS прописывается по вкусу.
/search_suggestions.json
Параметры:
<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>