JSFiddle - React, Tailwind, and code Playground

by veer712

HTML

<table style='width:370px;'>
    <tr>
        <td style='width:160px;'>
            <b>Group 1:</b><br/>
            Search: <input type="text" id="search" />
           <select multiple="multiple" id='lstBox1'>
              <option value="ajax">Ajax</option>
              <option value="jquery">jQuery</option>
              <option value="javascript">JavaScript</option>
              <option value="mootool">MooTools</option>
              <option value="prototype">Prototype</option>
              <option value="dojo">Dojo</option>
              <option value="Atlas">Atlas</option>
               <option value="abcd.gz">abcd.gz</option>
               <option value="veer.txt">veer.txt</option>
               <option value="test.zip">test.zip</option>
               <option value="vet.filepart">vet.filepart</option>
               <option value="test_campaign.gz">test_campaign.gz</option>
               <option value="atlanta">atlanta</option>
               <option value="Notepad">Notepad</option>
               <option value="123312_abc_55.gz">123312_abc_55.gz</option>
               <option value="113312_abc_55.gz">113312_abc_55.gz</option>
               <option value="114312_abc_55.gz">114312_abc_55.gz</option>
               <option value="115312_abc_55.gz">115312_abc_55.gz</option>
               <option value="116312_abc_55.gz">116312_abc_55.gz</option>
               <option value="117312_abc_55.gz">117312_abc_55.gz</option>
               
        </select>
    </td>
    <td style='width:50px;text-align:center;vertical-align:middle;'>
        <input type='button' id='btnRight' value ='  >  ' onclick="moveRight(event,'lstBox1','lstBox2');"/>
        <br/><input type='button' id='btnLeft' value ='  <  ' onclick="moveLeft(event,'lstBox1','lstBox2');" />
    </td>
    <td style='width:160px;'>
        <b>Selected: </b><br/>
        <select multiple="multiple" id='lstBox2' readonly>
          <option value="asp">ASP.NET</option>
          <option...

JavaScript

$(document).ready(function() {
    $('#search').keyup(function(){
        searchList();
    });
    function searchList(){
        var searchvalue = document.getElementById('search').value;        
        var from_s = document.getElementById('lstBox1');
        var len = from_s.options.length;
        //console.log(len);
        for(var i = 0; i<len;i++){
          var st = from_s.options[i].value;          
          var mat = st.indexOf(searchvalue);            
          //console.log(mat.length);
          if(mat > -1){            
            var temp = from_s.options[i];
            from_s.add(temp, from_s.options[0]);
          }
        }
      }
});
    function moveRight(event,leftBox,rightBox){           
            var selectedOpts = $("#"+leftBox+" option:selected");            
            if (selectedOpts.length == 0) {
                alert("Nothing to move.");
                event.preventDefault();
            }
            $("#"+rightBox+"").append($(selectedOpts).clone());
            $(selectedOpts).remove();
            event.preventDefault();
     }

function moveLeft(event,leftBox,rightBox){
        var selectedOpts = $("#"+rightBox+" option:selected");       
        if (selectedOpts.length == 0) {
            alert("Nothing to move.");
            event.preventDefault();
        }
        $("#"+leftBox+"").append($(selectedOpts).clone());
        $(selectedOpts).remove();
        event.preventDefault();
}