Searchable select

<div class="field combo" data-combobox>
<label class="label" for="ss-p">Product</label>
<div class="input">
<i class="ti ti-search">
</i>
<input type="text" id="ss-p" role="combobox" aria-expanded="false" aria-controls="ss-p-list" aria-autocomplete="list" autocomplete="off" placeholder="Type to search">
<button type="button" class="btn-reveal" data-combo-toggle aria-label="Show all" aria-expanded="false" aria-controls="ss-p-list" tabindex="-1">
<i class="ti ti-chevron-down">
</i>
</button>
</div>
<input type="hidden" name="ss-p">
<ul role="listbox" id="ss-p-list" aria-label="Product" hidden>
<li role="option" id="ss-p-o0" data-value="HD-1001" data-label="Oat flat white" aria-selected="false">Oat flat white<small>$4.50</small>
</li>
<li role="option" id="ss-p-o1" data-value="HD-1002" data-label="Cappuccino" aria-selected="false">Cappuccino<small>$4.20</small>
</li>
<li role="option" id="ss-p-o2" data-value="HD-1003" data-label="Matcha latte" aria-selected="false">Matcha latte<small>$5.20</small>
</li>
<li role="option" id="ss-p-o3" data-value="HD-1004" data-label="Hot chocolate" aria-selected="false">Hot chocolate<small>$4.40</small>
</li>
<li role="option" id="ss-p-o4" data-value="HD-1005" data-label="Espresso" aria-selected="false">Espresso<small>$3.00</small>
</li>
<li role="option" id="ss-p-o5" data-value="HD-1006" data-label="Chai latte" aria-selected="false">Chai latte<small>$4.60</small>
</li>
<li role="option" id="ss-p-o6" data-value="CD-1007" data-label="Cold brew" aria-selected="false">Cold brew<small>$4.80</small>
</li>
<li role="option" id="ss-p-o7" data-value="CD-1008" data-label="Sparkling water" aria-selected="false">Sparkling water<small>$2.40</small>
</li>
<li role="option" id="ss-p-o8" data-value="CD-1009" data-label="Orange juice" aria-selected="false">Orange juice<small>$3.90</small>
</li>
<li role="option" id="ss-p-o9" data-value="CD-1010" data-label="Iced tea" aria-selected="false">Iced tea<small>$3.20</small>
</li>
<li role="option" id="ss-p-o10" data-value="CD-1011" data-label="Lemonade" aria-selected="false">Lemonade<small>$3.40</small>
</li>
<li role="option" id="ss-p-o11" data-value="CD-1012" data-label="Kombucha" aria-selected="false">Kombucha<small>$4.20</small>
</li>
<li role="option" id="ss-p-o12" data-value="BK-1013" data-label="Butter croissant" aria-selected="false">Butter croissant<small>$3.50</small>
</li>
<li role="option" id="ss-p-o13" data-value="BK-1014" data-label="Raspberry tart" aria-selected="false">Raspberry tart<small>$6.00</small>
</li>
<li role="option" id="ss-p-o14" data-value="BK-1015" data-label="Pain au chocolat" aria-selected="false">Pain au chocolat<small>$3.80</small>
</li>
<li role="option" id="ss-p-o15" data-value="BK-1016" data-label="Chocolate cookie" aria-selected="false">Chocolate cookie<small>$2.20</small>
</li>
<li role="option" id="ss-p-o16" data-value="BK-1017" data-label="Banana bread" aria-selected="false">Banana bread<small>$3.60</small>
</li>
<li role="option" id="ss-p-o17" data-value="BK-1018" data-label="Blueberry muffin" aria-selected="false">Blueberry muffin<small>$3.30</small>
</li>
<li role="option" id="ss-p-o18" data-value="BK-1019" data-label="Cinnamon roll" aria-selected="false">Cinnamon roll<small>$3.70</small>
</li>
<li role="option" id="ss-p-o19" data-value="BK-1020" data-label="Sourdough loaf" aria-selected="false">Sourdough loaf<small>$6.50</small>
</li>
<li role="option" id="ss-p-o20" data-value="GR-1021" data-label="Whole milk, 1 L" aria-selected="false">Whole milk, 1 L<small>$1.95</small>
</li>
<li role="option" id="ss-p-o21" data-value="GR-1022" data-label="Free-range eggs, 12" aria-selected="false">Free-range eggs, 12<small>$4.75</small>
</li>
<li role="option" id="ss-p-o22" data-value="GR-1023" data-label="Oat milk, 1 L" aria-selected="false">Oat milk, 1 L<small>$2.95</small>
</li>
<li role="option" id="ss-p-o23" data-value="GR-1024" data-label="Granola, 500 g" aria-selected="false">Granola, 500 g<small>$5.40</small>
</li>
<li role="option" id="ss-p-o24" data-value="GR-1025" data-label="Wildflower honey" aria-selected="false">Wildflower honey<small>$8.90</small>
</li>
<li role="option" id="ss-p-o25" data-value="GB-1026" data-label="Gift box" aria-selected="false">Gift box<small>$12.00</small>
</li>
<li role="option" id="ss-p-o26" data-value="GB-1027" data-label="Tote bag" aria-selected="false">Tote bag<small>$9.00</small>
</li>
<li role="option" id="ss-p-o27" data-value="GB-1028" data-label="Gift card" aria-selected="false">Gift card<small>$25.00</small>
</li>
<li role="option" id="ss-p-o28" data-value="CB-1031" data-label="House blend beans, 250 g" aria-selected="false">House blend beans, 250 g<small>$11.50</small>
</li>
<li role="option" id="ss-p-o29" data-value="CB-1032" data-label="Ethiopia Yirgacheffe, 250 g" aria-selected="false">Ethiopia Yirgacheffe, 250 g<small>$14.00</small>
</li>
<li role="option" id="ss-p-o30" data-value="CB-1033" data-label="Colombia Huila, 250 g" aria-selected="false">Colombia Huila, 250 g<small>$13.00</small>
</li>
<li role="option" id="ss-p-o31" data-value="CB-1034" data-label="Decaf blend, 250 g" aria-selected="false">Decaf blend, 250 g<small>$12.00</small>
</li>
<li role="option" id="ss-p-o32" data-value="CB-1035" data-label="Espresso roast, 1 kg" aria-selected="false">Espresso roast, 1 kg<small>$38.00</small>
</li>
<li role="option" id="ss-p-o33" data-value="TE-1036" data-label="English breakfast tea, 20 bags" aria-selected="false">English breakfast tea, 20 bags<small>$6.50</small>
</li>
<li role="option" id="ss-p-o34" data-value="TE-1037" data-label="Earl grey tea, 20 bags" aria-selected="false">Earl grey tea, 20 bags<small>$6.50</small>
</li>
<li role="option" id="ss-p-o35" data-value="TE-1038" data-label="Peppermint tea, 20 bags" aria-selected="false">Peppermint tea, 20 bags<small>$5.90</small>
</li>
<li role="option" id="ss-p-o36" data-value="TE-1039" data-label="Sencha green tea, 100 g" aria-selected="false">Sencha green tea, 100 g<small>$9.50</small>
</li>
<li role="option" id="ss-p-o37" data-value="MR-1040" data-label="Ceramic mug, 350 ml" aria-selected="false">Ceramic mug, 350 ml<small>$14.00</small>
</li>
<li role="option" id="ss-p-o38" data-value="MR-1041" data-label="Travel cup, 450 ml" aria-selected="false">Travel cup, 450 ml<small>$22.00</small>
</li>
<li role="option" id="ss-p-o39" data-value="MR-1042" data-label="Pour-over kit" aria-selected="false">Pour-over kit<small>$34.00</small>
</li>
<li role="option" id="ss-p-o40" data-value="MR-1043" data-label="Paper filters, 100" aria-selected="false">Paper filters, 100<small>$6.00</small>
</li>
<li role="option" id="ss-p-o41" data-value="MR-1044" data-label="Hand grinder" aria-selected="false">Hand grinder<small>$58.00</small>
</li>
<li role="option" id="ss-p-o42" data-value="GR-1045" data-label="Dark chocolate bar, 70%" aria-selected="false">Dark chocolate bar, 70%<small>$4.50</small>
</li>
<li role="option" id="ss-p-o43" data-value="BK-1046" data-label="Almond biscotti, 6" aria-selected="false">Almond biscotti, 6<small>$5.20</small>
</li>
<li role="option" id="ss-p-o44" data-value="GB-1047" data-label="Shortbread tin" aria-selected="false">Shortbread tin<small>$15.00</small>
</li>
<li role="option" id="ss-p-o45" data-value="SP-1048" data-label="Vanilla syrup, 750 ml" aria-selected="false">Vanilla syrup, 750 ml<small>$9.80</small>
</li>
<li role="option" id="ss-p-o46" data-value="SP-1049" data-label="Caramel syrup, 750 ml" aria-selected="false">Caramel syrup, 750 ml<small>$9.80</small>
</li>
<li role="option" id="ss-p-o47" data-value="SP-1050" data-label="Cups 12 oz, 50" aria-selected="false">Cups 12 oz, 50<small>$7.50</small>
</li>
<li role="option" id="ss-p-o48" data-value="SP-1051" data-label="Lids 12 oz, 50" aria-selected="false">Lids 12 oz, 50<small>$4.00</small>
</li>
<li role="option" id="ss-p-o49" data-value="SP-1052" data-label="Napkins, 250" aria-selected="false">Napkins, 250<small>$3.50</small>
</li>
<li class="combo-empty" data-combo-empty hidden>Nothing matches</li>
</ul>
<span class="sr-only" role="status" data-combo-status>
</span>
</div>

<div class="field combo" data-combobox>
<label class="label" for="ss-c">Customer</label>
<div class="input">
<i class="ti ti-search">
</i>
<input type="text" id="ss-c" role="combobox" aria-expanded="false" aria-controls="ss-c-list" aria-autocomplete="list" autocomplete="off" placeholder="Name or phone">
<button type="button" class="btn-reveal" data-combo-toggle aria-label="Show all" aria-expanded="false" aria-controls="ss-c-list" tabindex="-1">
<i class="ti ti-chevron-down">
</i>
</button>
</div>
<input type="hidden" name="ss-c">
<ul role="listbox" id="ss-c-list" aria-label="Customer" hidden>
<li role="option" id="ss-c-o0" data-value="C2001" data-label="Ana Martins" aria-selected="false">Ana Martins<small>(207) 555-0154</small>
</li>
<li role="option" id="ss-c-o1" data-value="C2002" data-label="Leo Haddad" aria-selected="false">Leo Haddad<small>(207) 555-0155</small>
</li>
<li role="option" id="ss-c-o2" data-value="C2003" data-label="Grace Sato" aria-selected="false">Grace Sato<small>(207) 555-0156</small>
</li>
<li role="option" id="ss-c-o3" data-value="C2004" data-label="Daniel Mensah" aria-selected="false">Daniel Mensah<small>(207) 555-0157</small>
</li>
<li role="option" id="ss-c-o4" data-value="C2005" data-label="Mia Hughes" aria-selected="false">Mia Hughes<small>(207) 555-0158</small>
</li>
<li role="option" id="ss-c-o5" data-value="C2006" data-label="Noah Cohen" aria-selected="false">Noah Cohen<small>(207) 555-0159</small>
</li>
<li role="option" id="ss-c-o6" data-value="C2007" data-label="Sara Okafor" aria-selected="false">Sara Okafor<small>(207) 555-0160</small>
</li>
<li role="option" id="ss-c-o7" data-value="C2008" data-label="Omar Silva" aria-selected="false">Omar Silva<small>(207) 555-0161</small>
</li>
<li role="option" id="ss-c-o8" data-value="C2009" data-label="Ivy Costa" aria-selected="false">Ivy Costa<small>(207) 555-0162</small>
</li>
<li role="option" id="ss-c-o9" data-value="C2010" data-label="Lucas Iyer" aria-selected="false">Lucas Iyer<small>(207) 555-0163</small>
</li>
<li role="option" id="ss-c-o10" data-value="C2011" data-label="Zoe Diallo" aria-selected="false">Zoe Diallo<small>(207) 555-0164</small>
</li>
<li role="option" id="ss-c-o11" data-value="C2012" data-label="Ethan Berg" aria-selected="false">Ethan Berg<small>(207) 555-0165</small>
</li>
<li role="option" id="ss-c-o12" data-value="C2013" data-label="Aisha Chen" aria-selected="false">Aisha Chen<small>(207) 555-0166</small>
</li>
<li role="option" id="ss-c-o13" data-value="C2014" data-label="Mateo Kim" aria-selected="false">Mateo Kim<small>(207) 555-0167</small>
</li>
<li role="option" id="ss-c-o14" data-value="C2015" data-label="Hana Nair" aria-selected="false">Hana Nair<small>(207) 555-0168</small>
</li>
<li role="option" id="ss-c-o15" data-value="C2016" data-label="Felix Ruiz" aria-selected="false">Felix Ruiz<small>(207) 555-0169</small>
</li>
<li role="option" id="ss-c-o16" data-value="C2017" data-label="Nina Tanaka" aria-selected="false">Nina Tanaka<small>(207) 555-0170</small>
</li>
<li role="option" id="ss-c-o17" data-value="C2018" data-label="Jonah Quinn" aria-selected="false">Jonah Quinn<small>(207) 555-0171</small>
</li>
<li role="option" id="ss-c-o18" data-value="C2019" data-label="Priya Okoro" aria-selected="false">Priya Okoro<small>(207) 555-0172</small>
</li>
<li role="option" id="ss-c-o19" data-value="C2020" data-label="Owen Lopez" aria-selected="false">Owen Lopez<small>(207) 555-0173</small>
</li>
<li role="option" id="ss-c-o20" data-value="C2021" data-label="Elena Ivanova" aria-selected="false">Elena Ivanova<small>(207) 555-0174</small>
</li>
<li role="option" id="ss-c-o21" data-value="C2022" data-label="Kofi Farah" aria-selected="false">Kofi Farah<small>(207) 555-0175</small>
</li>
<li role="option" id="ss-c-o22" data-value="C2023" data-label="Maya Rossi" aria-selected="false">Maya Rossi<small>(207) 555-0176</small>
</li>
<li role="option" id="ss-c-o23" data-value="C2024" data-label="Arjun Park" aria-selected="false">Arjun Park<small>(207) 555-0177</small>
</li>
<li role="option" id="ss-c-o24" data-value="C2025" data-label="Chloe Novak" aria-selected="false">Chloe Novak<small>(207) 555-0178</small>
</li>
<li role="option" id="ss-c-o25" data-value="C2026" data-label="Diego Weber" aria-selected="false">Diego Weber<small>(207) 555-0179</small>
</li>
<li role="option" id="ss-c-o26" data-value="C2027" data-label="Lila Patel" aria-selected="false">Lila Patel<small>(207) 555-0180</small>
</li>
<li role="option" id="ss-c-o27" data-value="C2028" data-label="Samir Laurent" aria-selected="false">Samir Laurent<small>(207) 555-0181</small>
</li>
<li role="option" id="ss-c-o28" data-value="C2029" data-label="Ruby Moreau" aria-selected="false">Ruby Moreau<small>(207) 555-0182</small>
</li>
<li role="option" id="ss-c-o29" data-value="C2030" data-label="Theo Reyes" aria-selected="false">Theo Reyes<small>(207) 555-0183</small>
</li>
<li role="option" id="ss-c-o30" data-value="C2031" data-label="Amara Brooks" aria-selected="false">Amara Brooks<small>(207) 555-0184</small>
</li>
<li role="option" id="ss-c-o31" data-value="C2032" data-label="Ben Lee" aria-selected="false">Ben Lee<small>(207) 555-0185</small>
</li>
<li role="option" id="ss-c-o32" data-value="C2033" data-label="Yuki Martin" aria-selected="false">Yuki Martin<small>(207) 555-0186</small>
</li>
<li role="option" id="ss-c-o33" data-value="C2034" data-label="Isla Fischer" aria-selected="false">Isla Fischer<small>(207) 555-0187</small>
</li>
<li role="option" id="ss-c-o34" data-value="C2035" data-label="Marco Kapoor" aria-selected="false">Marco Kapoor<small>(207) 555-0188</small>
</li>
<li role="option" id="ss-c-o35" data-value="C2036" data-label="Leah Walker" aria-selected="false">Leah Walker<small>(207) 555-0189</small>
</li>
<li role="option" id="ss-c-o36" data-value="C2037" data-label="Hugo Rahman" aria-selected="false">Hugo Rahman<small>(207) 555-0190</small>
</li>
<li role="option" id="ss-c-o37" data-value="C2038" data-label="Freya Price" aria-selected="false">Freya Price<small>(207) 555-0191</small>
</li>
<li role="option" id="ss-c-o38" data-value="C2039" data-label="Ravi Andersen" aria-selected="false">Ravi Andersen<small>(207) 555-0192</small>
</li>
<li role="option" id="ss-c-o39" data-value="C2040" data-label="Tess Murray" aria-selected="false">Tess Murray<small>(207) 555-0193</small>
</li>
<li role="option" id="ss-c-o40" data-value="C2041" data-label="Ana Reyes" aria-selected="false">Ana Reyes<small>(207) 555-0194</small>
</li>
<li role="option" id="ss-c-o41" data-value="C2042" data-label="Leo Brooks" aria-selected="false">Leo Brooks<small>(207) 555-0195</small>
</li>
<li role="option" id="ss-c-o42" data-value="C2043" data-label="Grace Lee" aria-selected="false">Grace Lee<small>(207) 555-0196</small>
</li>
<li role="option" id="ss-c-o43" data-value="C2044" data-label="Daniel Martin" aria-selected="false">Daniel Martin<small>(207) 555-0197</small>
</li>
<li role="option" id="ss-c-o44" data-value="C2045" data-label="Mia Fischer" aria-selected="false">Mia Fischer<small>(207) 555-0198</small>
</li>
<li role="option" id="ss-c-o45" data-value="C2046" data-label="Noah Kapoor" aria-selected="false">Noah Kapoor<small>(207) 555-0199</small>
</li>
<li role="option" id="ss-c-o46" data-value="C2047" data-label="Sara Walker" aria-selected="false">Sara Walker<small>(603) 555-0100</small>
</li>
<li role="option" id="ss-c-o47" data-value="C2048" data-label="Omar Rahman" aria-selected="false">Omar Rahman<small>(603) 555-0101</small>
</li>
<li role="option" id="ss-c-o48" data-value="C2049" data-label="Ivy Price" aria-selected="false">Ivy Price<small>(603) 555-0102</small>
</li>
<li role="option" id="ss-c-o49" data-value="C2050" data-label="Lucas Andersen" aria-selected="false">Lucas Andersen<small>(603) 555-0103</small>
</li>
<li role="option" id="ss-c-o50" data-value="C2051" data-label="Zoe Murray" aria-selected="false">Zoe Murray<small>(603) 555-0104</small>
</li>
<li role="option" id="ss-c-o51" data-value="C2052" data-label="Ethan Martins" aria-selected="false">Ethan Martins<small>(603) 555-0105</small>
</li>
<li role="option" id="ss-c-o52" data-value="C2053" data-label="Aisha Haddad" aria-selected="false">Aisha Haddad<small>(603) 555-0106</small>
</li>
<li role="option" id="ss-c-o53" data-value="C2054" data-label="Mateo Sato" aria-selected="false">Mateo Sato<small>(603) 555-0107</small>
</li>
<li role="option" id="ss-c-o54" data-value="C2055" data-label="Hana Mensah" aria-selected="false">Hana Mensah<small>(603) 555-0108</small>
</li>
<li role="option" id="ss-c-o55" data-value="C2056" data-label="Felix Hughes" aria-selected="false">Felix Hughes<small>(603) 555-0109</small>
</li>
<li role="option" id="ss-c-o56" data-value="C2057" data-label="Nina Cohen" aria-selected="false">Nina Cohen<small>(603) 555-0110</small>
</li>
<li role="option" id="ss-c-o57" data-value="C2058" data-label="Jonah Okafor" aria-selected="false">Jonah Okafor<small>(603) 555-0111</small>
</li>
<li role="option" id="ss-c-o58" data-value="C2059" data-label="Priya Silva" aria-selected="false">Priya Silva<small>(603) 555-0112</small>
</li>
<li role="option" id="ss-c-o59" data-value="C2060" data-label="Owen Costa" aria-selected="false">Owen Costa<small>(603) 555-0113</small>
</li>
<li class="combo-empty" data-combo-empty hidden>Nothing matches</li>
</ul>
<span class="sr-only" role="status" data-combo-status>
</span>
</div>

<div class="field combo" data-combobox>
<label class="label" for="ss-s">Supplier</label>
<div class="input">
<i class="ti ti-search">
</i>
<input type="text" id="ss-s" role="combobox" aria-expanded="false" aria-controls="ss-s-list" aria-autocomplete="list" autocomplete="off" placeholder="Type to search" value="Blue Harbour Roasters">
<button type="button" class="btn-reveal" data-combo-toggle aria-label="Show all" aria-expanded="false" aria-controls="ss-s-list" tabindex="-1">
<i class="ti ti-chevron-down">
</i>
</button>
</div>
<input type="hidden" name="ss-s">
<ul role="listbox" id="ss-s-list" aria-label="Supplier" hidden>
<li role="option" id="ss-s-o0" data-value="SU1" data-label="Fresh Valley Dairy" aria-selected="false">Fresh Valley Dairy<small>Gorham</small>
</li>
<li role="option" id="ss-s-o1" data-value="SU2" data-label="Hillside Farm" aria-selected="false">Hillside Farm<small>Freeport</small>
</li>
<li role="option" id="ss-s-o2" data-value="SU3" data-label="Blue Harbour Roasters" aria-selected="true">Blue Harbour Roasters<small>Portland</small>
</li>
<li role="option" id="ss-s-o3" data-value="SU4" data-label="Golden Crust Bakery" aria-selected="false">Golden Crust Bakery<small>Brunswick</small>
</li>
<li role="option" id="ss-s-o4" data-value="SU5" data-label="Green Leaf Teas" aria-selected="false">Green Leaf Teas<small>Lewiston</small>
</li>
<li role="option" id="ss-s-o5" data-value="SU6" data-label="Sunny Orchard Juices" aria-selected="false">Sunny Orchard Juices<small>Auburn</small>
</li>
<li role="option" id="ss-s-o6" data-value="SU7" data-label="Northfield Packaging" aria-selected="false">Northfield Packaging<small>Biddeford</small>
</li>
<li role="option" id="ss-s-o7" data-value="SU8" data-label="Meadow Bees" aria-selected="false">Meadow Bees<small>Bath</small>
</li>
<li role="option" id="ss-s-o8" data-value="SU9" data-label="Sweet Drop Syrups" aria-selected="false">Sweet Drop Syrups<small>Augusta</small>
</li>
<li role="option" id="ss-s-o9" data-value="SU10" data-label="Harbourline Merch" aria-selected="false">Harbourline Merch<small>Rockland</small>
</li>
<li role="option" id="ss-s-o10" data-value="SU11" data-label="Cacao Co." aria-selected="false">Cacao Co.<small>Portland</small>
</li>
<li role="option" id="ss-s-o11" data-value="SU12" data-label="Clearwater Springs" aria-selected="false">Clearwater Springs<small>Bangor</small>
</li>
<li class="combo-empty" data-combo-empty hidden>Nothing matches</li>
</ul>
<span class="sr-only" role="status" data-combo-status>
</span>
</div>