JSFiddle - React, Tailwind, and code Playground

by veer712

HTML

<form>
<select name="fileList" id="fileList" multiple="multiple" size="10">
  <option value="4" title="Atlas">Atlas</option>
  <option value="13" title="abcd.gz">abcd.gz</option>
  <option value="15" title="veer.txt">veer.txt</option>
  <option value="19" title="test.zip">test.zip</option>
  <option value="21" title="vet.filepart">vet.filepart</option>
  <option value="33" title="test_campaign.gz">test_campaign.gz</option>
  <option value="98" title="atlanta">atlanta</option>
  <option value="111" title="Notepad">Notepad</option>
  <option value="112" title="123312_abc_55.gz">123312_abc_55.gz</option>
  <option value="113" title="113312_abc_55.gz">113312_abc_55.gz</option>
  <option value="114" title="114312_abc_55.gz">114312_abc_55.gz</option>
  <option value="115" title="115312_abc_55.gz">115312_abc_55.gz</option>
  <option value="116" title="116312_abc_55.gz">116312_abc_55.gz</option>
  <option value="117" title="117312_abc_55.gz">117312_abc_55.gz</option>
</select>
<label>Search: </label>
<input type="text" id="search" onkeyup="searchList();" />
</form>

JavaScript

function searchList(){
    var searchvalue = document.getElementById('search').value;
    var from_s = document.getElementById('fileList');
    for(var i = 0; i<from_s.options.length-1;i++){
      var st = from_s.options[i].text;
      if(st.search(searchvalue)> - 1){
        var temp = from_s.options[i];
        from_s.add(temp, from_s.options[0]);
      }
    }
}