JSFiddle - React, Tailwind, and code Playground

by Andrea Scanu

HTML

<input type="text" id="searchbox" size="74" />
<select name="tl1" id="templatelist1" class="darkbg" size="25" style="font-weight:bold; width:350px" onchange="Tprep(this.options[this.selectedIndex], '1', 1);" ondblclick="Tdo(Tprep(this.options[this.selectedIndex], '1', 0), '');">
	<option class="templategroup" value="">- - Default Style Templates - -</option>
	<option class="col-g" value="~" i="vBulletin Solutions;1268198575">activateform</option>
	<option class="col-g" value="~" i="vBulletin Solutions;1268198575">activate_requestemail</option>
	<option class="templategroup" value="[activitystream]">Activity Stream Templates »</option>
	<option class="templategroup" value="[ad_]">Ad Location Templates »</option>
	<option class="templategroup" value="[album]">Album Templates »</option>
	<option class="templategroup" value="[announcement]">Announcement Templates »</option>
	<option class="templategroup" value="[assetmanager]">Asset Manager Templates »</option>
	<option class="col-g" value="~" i="vBulletin Solutions;1326139719">attachmentbit</option>
	<option class="col-g" value="~" i="vBulletin Solutions;1326139719">ATTACHMENTS</option>
	<option class="templategroup" value="[bbcode]">BB Code Layout Templates »</option>
	<option class="templategroup" value="[block]">Block Templates »</option>
	<option class="templategroup" value="[blog]">Blog Templates »</option>
	<option class="col-g" value="~" i="vBulletin Solutions;1251286785">board_inactive_warning</option>
	<option class="templategroup" value="[buddylist]">Buddy (Contact) List Templates »</option>
	<option class="templategroup" value="[calendar]">Calendar Templates »</option>
	<option class="col-g" value="~" i="ebrown;1272409301">cms_userdef_site_summary</option>
	<option class="col-g" value="~" i="ksours;1276217614">cms_userdef_site_summary_bit</option>
	<option class="col-g" value="~" i="vBulletin Solutions;1315344388">contactus</option>
	<option class="col-g" value="~" i="vBulletin...

JavaScript

$('#searchbox').insertBefore('select.darkbg').after('<br /><br />');
$('#searchbox').keyup(function(){
    var valThis = $(this).val().toLowerCase();
    $('.darkbg option').each(function(){
        var text = $(this).text().toLowerCase();
        (text.indexOf(valThis) != -1) ? $(this).show() : $(this).hide();            
    });
});