Multi Select Chips

<div class="ms"><div class="fd"><span class="ch"></span><input class="ip" placeholder="Search…"><i class="ar">⇅</i></div><div class="dd"></div></div>

.ms{position:relative;width:100%;height:100%;min-height:380px;display:flex;flex-direction:column;align-items:center;padding-top:70px;box-sizing:border-box;font-family:system-ui,-apple-system,sans-serif;color:#eee;}.fd{width:320px;min-height:44px;box-sizing:border-box;display:flex;align-items:center;flex-wrap:wrap;gap:6px;background:#1b1b1b;border:1px solid #2a2a2a;border-radius:12px;padding:6px 32px 6px 8px;position:relative;cursor:text;transition:border-color .2s}.fd.f{border-color:#0a84ff}.ch{display:contents}.cp{display:flex;align-items:center;gap:6px;background:#262626;border-radius:8px;padding:5px 8px;font-size:12px;animation:pop .3s cubic-bezier(.3,1.5,.5,1)}.cp u{text-decoration:none;color:#888;cursor:pointer;font-size:13px}.cp u:hover{color:#fff}@keyframes pop{from{transform:scale(.6);opacity:0}}.ip{flex:1;min-width:60px;background:none;border:0;outline:0;color:#eee;font:12px system-ui}.ar{position:absolute;right:10px;color:#777;font-style:normal;font-size:12px}.dd{width:320px;margin-top:6px;background:#1b1b1b;border:1px solid #2a2a2a;border-radius:12px;padding:4px;box-sizing:border-box;opacity:0;transform:translateY(-6px);pointer-events:none;transition:opacity .2s,transform .3s cubic-bezier(.3,1.4,.5,1)}.dd.on{opacity:1;transform:none;pointer-events:auto}.op{display:flex;justify-content:space-between;padding:8px 10px;border-radius:8px;font-size:12px;cursor:pointer}.op:hover{background:#262626}.op i{color:#0a84ff;font-style:normal}

(function(){var R=document.querySelector(".ms"),fd=R.querySelector(".fd"),ch=R.querySelector(".ch"),ip=R.querySelector(".ip"),dd=R.querySelector(".dd"),O=["Design","Engineering","Product","Marketing","Sales","Support"],S=["Design","Engineering"];function draw(){ch.innerHTML="";S.forEach(function(s){var c=document.createElement("span");c.className="cp";c.innerHTML=s+" <u>×</u>";c.querySelector("u").onclick=function(e){e.stopPropagation();S.splice(S.indexOf(s),1);draw()};ch.appendChild(c)});dd.innerHTML="";var q=ip.value.toLowerCase();O.filter(function(o){return o.toLowerCase().indexOf(q)>-1}).forEach(function(o){var r=document.createElement("div");r.className="op";r.innerHTML="<span>"+o+"</span><i>"+(S.indexOf(o)>-1?"✓":"")+"</i>";r.onclick=function(e){e.stopPropagation();var i=S.indexOf(o);if(i>-1)S.splice(i,1);else S.push(o);ip.value="";draw();ip.focus()};dd.appendChild(r)})}fd.onclick=function(){dd.classList.add("on");fd.classList.add("f");ip.focus()};ip.oninput=draw;ip.onkeydown=function(e){if(e.key==="Backspace"&&!ip.value&&S.length){S.pop();draw()}};document.addEventListener("click",function(e){if(!R.contains(e.target)){dd.classList.remove("on");fd.classList.remove("f")}});draw()})();