Search with Typed Hints
A search bar with a rotating typed placeholder hint, via Typed.js.
Requires Bootstrap 5, Typed.js. Add the CDN tags below to your page (styles in
<head>, scripts before </body>). The downloaded file already includes them.<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css"><script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script><script src="https://cdn.jsdelivr.net/npm/typed.js@2.1.0/dist/typed.umd.js"></script><div class="card border-0 shadow-sm" style="max-width:340px"><div class="card-body"><div class="input-group"><span class="input-group-text">🔍</span><input class="form-control" id="tsInput"></div><div class="position-relative" style="margin-top:-31px;margin-left:46px;pointer-events:none;color:#adb5bd"><span id="tsHint"></span></div></div></div>new Typed("#tsHint",{strings:["Search products…","Search docs…","Search users…"],typeSpeed:60,backSpeed:30,loop:true});document.getElementById("tsInput").addEventListener("input",function(){document.getElementById("tsHint").style.display=this.value?"none":"inline"});Free to use.This component uses Bootstrap 5, Typed.js (linked above). Copy any file, or download a ready-to-open .html page with the CDN links already included.