Tony's Collections
Tony's Bundles
tony /
Select with search
Simple Select
Demo
Code
<div :scope="
placeholder='Type To Select';
randomId=new Date().getTime(); // This is clunky but to focus the input we need to give it an identifier - this will just generate a stable number id based on the current timestamp
showOptions=false;
selectedOption=['','Select Fruit'];
allOptions=[['pear','🍐 Pear'],['strawberry','🍓 Strawberry'],['apple','🍏 Apple']];
highlightedOption=[];
filteredOptions=allOptions"
class="relative text-black" >
<button
type="button"
class="gap-x-1 border bg-white border-gray-100 shadow w-full rounded px-4 py-2 hover:bg-gray-100 cursor-pointer flex justify-between items-center"
:click="scope.showOptions = !scope.showOptions; document.getElementById(scope.randomId).focus();" >
<div>
<span :text="scope.selectedOption[1]">
</span>
</div>
<div class="transition duration-100 ease-out" :class="scope.showOptions ? 'rotate-180' : ''">
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
</svg>
</div>
</button>
<div class="relative">
<div class="transition ease-out duration-100 shadow opacity-0 absolute top-0 right-0 left-0 " :class="scope.showOptions ? 'transform opacity-100 scale-100' : 'transform opacity-0 scale-95 pointer-events-none' " >
<div class="bg-white rounded p-2" style="max-height:300px;overflow-y:scroll">
<input type="text"
:id="scope.randomId"
:change="
scope.filteredOptions = scope.allOptions.search(this.value);
scope.highlightedOption = scope.filteredOptions.first;
"
:keypress.enter="
event.preventDefault();
if (scope.highlightedOption && scope.highlightedOption.length) {
scope.selectedOption = scope.highlightedOption
} else {
scope.highlightedOption = [];
scope.selectedOption = [];
}
scope.showOptions = false;
scope.filteredOptions = scope.allOptions;
this.value='';
"
:keyup.up="
scope.highlightedOption = scope.filteredOptions.previousItem(scope.highlightedOption)"
:keyup.down="
scope.highlightedOption = scope.filteredOptions.nextItem(scope.highlightedOption)"
:placeholder="scope.placeholder"
class="mb-2 w-full outline-none" >
<div :each="option, index in scope.filteredOptions" >
<button :click="scope.selectedOption=option;
scope.highlightedOption = [];
scope.showOptions=false"
:class="scope.highlightedOption.sameAs(option) ? 'bg-gray-100 text-gray-700' : 'text-black'"
class="flex w-full text-left rounded px-2 py-2 hover:bg-gray-100 cursor-pointer block items-center"
type="button"
>
<div :text="option[1]"></div>
</button>
</div>
</div>
</div>
</div>
</div>