JSFiddle - React, Tailwind, and code Playground

by webspicer

HTML

<script src="http://www.marghoobsuleman.com/mywork/jcomponents/image-dropdown/samples/js/msdropdown/jquery.dd.min.js"></script>
<link rel="stylesheet" href="http://www.marghoobsuleman.com/mywork/jcomponents/image-dropdown/samples/css/msdropdown/dd.css">
 <input type="text" id="searchbar" onKeyUp="searchit();"  size="60" maxlength="60" autocomplete="off" />

<br /> <br /> <br /> <br />
<br /> 



<select id="filist" size="10" style="width:490px;">
			<option value="0" disabled="">Select from Most Popular Institutions</option>
			<option value="2393" >Bank of America </option>
			<option value="10">Citibank Online</option>
			<option value="16"> Fidelity Investments- Individual Account- USA</option>
			<option value="715">Vanguard</option>
			<option value="2"> Chase Bank</option>
			<option value="21" style="font-style:italic;" class="alert_add_account" title="Temporarily Unavailable &#10&#10Accounts from this financial institution cannot be added at this time.  We apologize for the inconvenience while we work on resolving this issue." data-image="https://www.evolutionnutrition.com/images/alert-icon-warning.gif"> PNC Bank</option>
			<option value="4"> Charles Schwab US - Investment Services</option>
			<option value="17501">Capital One - Online Banking</option>
			<option value="19"> E*Trade Financial - Investments</option>
			<option value="760">Morgan Stanley Smith Barney - ClientServ</option>
        </select>

JavaScript

$(document).ready(function() 
{
	//$("#filist").msDropdown().data("dd");
		
});

var prevSearchTime = new Date().getTime();
var latestKeyEntryIgnored = false;
var srchFiList;

function keepSearchCurrect() 
{
	alert( "before keepSearchCurrect" );
	
    if (latestKeyEntryIgnored == true) 
	{
		alert( "inside keepSearchCurrect" );
        latestKeyEntryIgnored = false;
        searchit();
    }
    setTimeout(keepSearchCurrent, 2000);
}function searchit()
{ 

	//alert( "searchit" );
	
    var now = new Date().getTime();
    if (now < (prevSearchTime + 500)) 
	{
        latestKeyEntryIgnored = true;
        return;
    }
    latestKeyEntryIgnored = false;
    srchFiList = document.getElementById('filist');
    srchFiList.options.length = 0;
	
    var tmpkeyword = document.getElementById('searchbar').value.toLowerCase().split(" ");
    if (tmpkeyword.length == 0 || (tmpkeyword.length == 1 && tmpkeyword[0].length == 0)) 
	{
        staticPopularList();
        return;
    }
    
    if (tmpkeyword.length == 1 && tmpkeyword[0].length < 2) 
	{
        staticPopularList();
        return;
    }
    var keyword = new Array(tmpkeyword.length);
    for(var i=0; i < tmpkeyword.length; i++) 
	{
       keyword[i] = " " + tmpkeyword[i];
    }

    var optionsize = 0;
    var option;
    var matched = false;
    
    var popularInstitutionLabelDisplayed = false;
	
    for(var i=0;i<FI_popular_list.length;i++)
	{
       matched = true;
   	   for(var j=0; j<keyword.length; j++) 
	   {
           if(FI_popular_list[i][2].indexOf(keyword[j]) == -1){
               matched = false;
               break;
           }
   	   }
	   
   	   if (matched == true) 
	   {
   	       if (popularInstitutionLabelDisplayed == false) {
                option=new Option("Popular Matching Institutions",0,false, false);
                option.disabled = true;
                srchFiList.options[optionsize++]= option;
                popularInstitutionLabelDisplayed = true;
   	       }
	      ...