검색창

<form role="search" class="sbw">
  <label for="sbi" class="sr">검색</label>
  <div class="sbin"><span class="sbico">⌕</span><input id="sbi" placeholder="검색어를 입력하세요"></div>
  <ul class="sblist" id="sbl">
    <li>리퀴드 글래스</li><li>글래스모피즘</li>
  </ul>
</form>

.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}
.sbw{width:min(220px,92%)}
.sbin{display:flex;align-items:center;gap:7px;border:1px solid var(--line);border-radius:9px;padding:8px 11px;background:var(--surface)}
.sbico{color:var(--muted);font-size:13px}
#sbi{border:0;outline:none;background:none;color:var(--fg);font-size:12px;flex:1}
.sblist{list-style:none;margin:6px 0 0;padding:5px;background:var(--surface);border:1px solid var(--line);border-radius:9px;
  opacity:0;transform:translateY(-4px);transition:opacity .18s,transform .18s}
.sblist[data-open]{opacity:1;transform:translateY(0)}
.sblist li{padding:6px 8px;font-size:12px;color:var(--muted);border-radius:6px}
.sblist li:first-child{color:var(--fg)}

const input = document.getElementById('sbi'), list = document.getElementById('sbl');
const word = '글래스';
let auto = true;
input.addEventListener('input', () => auto = false);
function loop() {
  if (!auto) return;
  input.value = ''; list.removeAttribute('data-open');
  let i = 0;
  const type = setInterval(() => {
    if (!auto) return clearInterval(type);
    i++; input.value = word.slice(0, i);
    if (i === 2) list.setAttribute('data-open', '');
    if (i >= word.length) { clearInterval(type); setTimeout(() => { if (auto) { list.removeAttribute('data-open'); setTimeout(loop, 1000); } }, 900); }
  }, 260);
}
setTimeout(loop, 500);