137b0ef8db
New header template adds full control over search field on desktop and mobile, which now allows for autocomplete suggestions on the results page Also fixed autocomplete results format, since opensearch requires a suggestions response of [<original query>, [<suggestion array>]]
53 lines
2.3 KiB
HTML
53 lines
2.3 KiB
HTML
{% if mobile %}
|
|
<header>
|
|
<div class="bz1lBb">
|
|
<form class="Pg70bf" id="search-form" method="POST">
|
|
<a class="logo-link mobile-logo"
|
|
href="/"
|
|
style="display:flex; justify-content:center; align-items:center; color:#685e79; font-size:18px; ">
|
|
<span class="V6gwVd">Wh</span><span class="iWkuvd">o</span><span class="cDrQ7">o</span><span
|
|
class="V6gwVd">g</span><span class="ntlR9">l</span><span
|
|
class="iWkuvd tJ3Myc">e</span>
|
|
</a>
|
|
<div class="H0PQec" style="width: 100%;">
|
|
<div class="sbc esbc autocomplete">
|
|
<input id="search-bar" autocapitalize="none" autocomplete="off" class="noHIxc" name="q"
|
|
spellcheck="false" type="text" value="{{ q }}">
|
|
<div class="sc"></div>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</header>
|
|
{% else %}
|
|
<header>
|
|
<div class="logo-div">
|
|
<a class="logo-link" href="/">
|
|
<span class="V6gwVd logo-letter">Wh</span><span class="iWkuvd logo-letter">o</span><span
|
|
class="cDrQ7 logo-letter">o</span><span class="V6gwVd logo-letter">g</span><span
|
|
class="ntlR9 logo-letter">l</span><span class="iWkuvd tJ3Myc logo-letter">e</span>
|
|
</a>
|
|
</div>
|
|
<div class="search-div">
|
|
<form id="search-form" class="search-form" id="sf" method="POST">
|
|
<div class="autocomplete" style="width: 100%; flex: 1">
|
|
<div style="width: 100%; display: flex">
|
|
<input id="search-bar" autocapitalize="none" autocomplete="off" class="noHIxc" name="q"
|
|
spellcheck="false" type="text" value="{{ q }}">
|
|
<div class="sc"></div>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</header>
|
|
{% endif %}
|
|
|
|
<script>
|
|
const searchBar = document.getElementById("search-bar");
|
|
|
|
searchBar.addEventListener("keyup", function (event) {
|
|
if (event.keyCode !== 13) {
|
|
handleUserInput(searchBar);
|
|
}
|
|
});
|
|
</script> |