Zoekveld met wisselende voorbeelden Nieuw

<!-- Zoekveld met wisselende voorbeelden · NedDev · eigen werk. -->
<div class="jouw-container">
<div class="zwp"><div class="zwp__in">
<form class="zwp__form" role="search">
<label class="zwp__lab" for="zwp-q">Zoek in 8.000 producten van Bouwmarkt Kok, Gouda</label>
<div class="zwp__box">
<svg class="zwp__ic" viewBox="0 0 20 20" aria-hidden="true"><circle cx="8.5" cy="8.5" r="5.5"/><path d="M13 13l4 4"/></svg>
<input class="zwp__q" id="zwp-q" type="search" autocomplete="off" aria-describedby="zwp-tip">
<span class="zwp__ph" aria-hidden="true">Zoek op <span class="zwp__wrap"><span class="zwp__w">radiatorfolie</span></span></span>
<button class="zwp__btn" type="submit">Zoeken</button>
</div>
<p class="zwp__tip" id="zwp-tip">Tip: zoek op productnaam, merk of artikelnummer.</p>
</form>
<p class="zwp__out" aria-live="polite"></p>
</div></div>
</div>

/* Zoekveld met wisselende voorbeelden · NedDev · eigen werk. */
.zwp{position:absolute;inset:0;overflow:auto;display:flex;padding:14px;box-sizing:border-box;background:#f4f3f1;font-family:'Switzer',sans-serif;color:#0a0a0a}
.zwp *,.zwp *::before,.zwp *::after{box-sizing:border-box}
.zwp__in{margin:auto;width:100%;max-width:400px}
.zwp__lab{display:block;font-size:14px;font-weight:700;margin-bottom:8px;line-height:1.35}
.zwp__box{position:relative;display:flex;align-items:center;height:46px;background:#fff;border:1px solid #8c8c8c;border-radius:4px;transition:border-color .15s,box-shadow .15s}
.zwp__box:hover{border-color:#0a0a0a}
.zwp__box:focus-within{border-color:#0a0a0a;box-shadow:0 0 0 3px rgba(245,72,15,.35)}
.zwp__ic{flex:none;width:18px;height:18px;margin:0 0 0 12px;fill:none;stroke:#4a4a4a;stroke-width:1.8;stroke-linecap:round}
.zwp__q{flex:1;min-width:0;height:100%;padding:0 10px;border:0;outline:0;background:none;font:400 15px 'Switzer',sans-serif;color:#0a0a0a;-webkit-appearance:none;appearance:none}
.zwp__q::-webkit-search-cancel-button{cursor:pointer}
.zwp__ph{position:absolute;left:40px;right:90px;top:0;bottom:0;display:flex;align-items:center;gap:.28em;font-size:15px;color:#6b6b6b;pointer-events:none;white-space:nowrap;overflow:hidden}
.zwp__wrap{position:relative;display:inline-block;height:1.4em;overflow:hidden;vertical-align:bottom}
.zwp__w{display:block;line-height:1.4em;color:#3a3a3a}
.zwp__w.is-out{animation:zwp-out .32s ease forwards}
.zwp__w.is-in{animation:zwp-in .32s ease}
@keyframes zwp-out{to{transform:translateY(-100%);opacity:0}}
@keyframes zwp-in{from{transform:translateY(100%);opacity:0}to{transform:none;opacity:1}}
.zwp.has-val .zwp__ph{display:none}
.zwp__btn{flex:none;height:36px;margin-right:4px;padding:0 14px;border:0;border-radius:4px;background:#0a0a0a;color:#fff;font:600 13.5px 'Switzer',sans-serif;cursor:pointer;transition:background-color .15s}
.zwp__btn:hover{background:#2a2a2a}
.zwp__btn:active{transform:translateY(1px)}
.zwp__btn:focus-visible{outline:2px solid #F5480F;outline-offset:2px}
.zwp__tip{margin:6px 0 0;font-size:12.5px;color:#4a4a4a}
.zwp__out{margin:10px 0 0;font-size:13px;min-height:1.4em}
.zwp__out b{font-weight:600}
@media (prefers-reduced-motion:reduce){.zwp *{transition:none!important;animation:none!important}}

// Zoekveld met wisselende voorbeelden · NedDev · eigen werk.
// root = het element waarin de HTML staat
function init(root){
var w=root.querySelector('.zwp');if(!w)return;
var sfx='-'+Math.random().toString(36).slice(2,7);
var q=w.querySelector('.zwp__q'),lab=w.querySelector('.zwp__lab'),tip=w.querySelector('.zwp__tip'),ww=w.querySelector('.zwp__w'),out=w.querySelector('.zwp__out'),f=w.querySelector('.zwp__form');
q.id=q.id+sfx;lab.setAttribute('for',q.id);tip.id=tip.id+sfx;q.setAttribute('aria-describedby',tip.id);
var W=['radiatorfolie','kitpistool','vloerverwarming 10 m\u00b2','buitenkraan vorstvrij','LED-plafondlamp','houten vlonderplank'],H={'radiatorfolie':14,'kitpistool':9,'vloerverwarming 10 m\u00b2':6,'buitenkraan vorstvrij':4,'LED-plafondlamp':38,'houten vlonderplank':22};
var i=0,tm=null,vis=true,rm=window.matchMedia&&matchMedia('(prefers-reduced-motion: reduce)').matches;
function running(){return !rm&&vis&&!document.hidden&&!q.value;}
function tick(){if(!running())return;ww.classList.remove('is-in');ww.classList.add('is-out');
 setTimeout(function(){i=(i+1)%W.length;ww.textContent=W[i];ww.classList.remove('is-out');void ww.offsetWidth;ww.classList.add('is-in');},320);}
function start(){if(tm||!running())return;tm=setInterval(tick,2800);}
function stop(){clearInterval(tm);tm=null;}
q.addEventListener('input',function(){w.classList.toggle('has-val',!!q.value);if(q.value)stop();else start();});
document.addEventListener('visibilitychange',function(){if(document.hidden)stop();else start();});
if('IntersectionObserver' in window){new IntersectionObserver(function(es){vis=es[0].isIntersecting;if(vis)start();else stop();}).observe(w);}
f.addEventListener('submit',function(e){e.preventDefault();var v=q.value.trim()||W[i];if(!q.value){q.value=v;w.classList.add('has-val');stop();}
 var n=H[v]!=null?H[v]:(v.length%7)*3+2;out.innerHTML='<b>'+n+' producten</b> voor \u201c'+v.replace(/[<>&]/g,'')+'\u201d, de meeste op voorraad in Gouda.';});
start();
}
init(document.querySelector('.jouw-container'));