Wyszukiwanie na stronie. Formularz wyszukiwania, JSON i podpowiedzi.

<div align="center" id="hotengine-search_form_block" itemscope itemtype="https://schema.org/WebSite">
<link itemprop="url" href="//{HOTENGINE-SC:site_url}/"/>
<form id="hotengine-search-searchinput" name="hotengine-search-searchinput" method="post" action="/pl/shop/" itemprop="potentialAction" itemscope itemtype="https://schema.org/SearchAction">
<meta itemprop="target" content="//{HOTENGINE-SC:site_url}/pl/shop/?search={search}"/>
<label>
<input class="input" name="search" type="text" placeholder="Szukaj..." id="hotengine-smart_search_input" value="" itemprop="query-input">
</label>
<label>
<button type="submit" class="search-button">Szukaj</button>
</label></form>
</div>

#hotengine-search_form_block{
position: relative;
width:300px;
float: right;
z-index:2;
height: 41px;
margin:33px 0px 33px 10px;
}

#hotengine-search_form_block input{   
height: 20px;
vertical-align: middle;
border: 1px solid #e5e5e5;
padding: 0.15em;
width: 20.0em;
color:#9c9b9b;
height: 20px;
background: #fff;
padding: 0 13px;
height: 41px;
}
#hotengine-search_form_block input[type="text"]{
text-indent:4px;height: 39px;
}
#hotengine-search_form_block .search-button{
background:#41474c;
border-radius:0px;
vertical-align:middle;
display:block;
position:absolute;
top:0px;
right:0px;
border:none;
color:#fff;
width:41px; height:41px;
text-align:center;
font-size:12px;
line-height:25px; 
cursor:pointer; overflow:hidden; 
}
#hotengine-search_form_block .search-button:after{
content:""; width:41px; height:41px; display:block; position: absolute; right:0px; top:0px; 
background:none; background-color:#d6d6d6;
-webkit-mask:url("data:image/svg+xml;base64,PCFET0NUWVBFIHN2ZyBQVUJMSUMgIi0vL1czQy8vRFREIFNWRyAxLjEvL0VOIiAiaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkIj4KDTwhLS0gVXBsb2FkZWQgdG86IFNWRyBSZXBvLCB3d3cuc3ZncmVwby5jb20sIFRyYW5zZm9ybWVkIGJ5OiBTVkcgUmVwbyBNaXhlciBUb29scyAtLT4KPHN2ZyB3aWR0aD0iODAwcHgiIGhlaWdodD0iODAwcHgiIHZpZXdCb3g9IjAgMCAxNiAxNiIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiBmaWxsPSJub25lIj4KDTxnIGlkPSJTVkdSZXBvX2JnQ2FycmllciIgc3Ryb2tlLXdpZHRoPSIwIi8+Cg08ZyBpZD0iU1ZHUmVwb190cmFjZXJDYXJyaWVyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KDTxnIGlkPSJTVkdSZXBvX2ljb25DYXJyaWVyIj4KDTxwYXRoIGZpbGw9IiMwMDAwMDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIgZD0iTTcuMjUgMmE1LjI1IDUuMjUgMCAxMDMuMTQ0IDkuNDU1bDIuMzI2IDIuMzI1YS43NS43NSAwIDEwMS4wNi0xLjA2bC0yLjMyNS0yLjMyNkE1LjI1IDUuMjUgMCAwMDcuMjUgMnpNMy41IDcuMjVhMy43NSAzLjc1IDAgMTE3LjUgMCAzLjc1IDMuNzUgMCAwMS03LjUgMHoiIGNsaXAtcnVsZT0iZXZlbm9kZCIvPgoNPC9nPgoNPC9zdmc+") center center no-repeat; 
-webkit-mask-size:20px;
}
#hotengine-search_form_block .search-button:hover:after{
	background-color:#fff;
}
#hotengine-search_form_block .search-button:active:after{transform: translateY(1px);}