SOURCE

$(function(){
    updateSelect();
});
var lastSelected;
var shuttleData = ["a1","a2","3","f4","ff5","fs6","fsy7","8","18","28","38","48","58","68","78"];
var shuttleSelect = [false,false,false,false,false,false,false,false,];
function fillColor(i)
{
    $("#"+lastSelected).css("background-color","transparent");
    $("#"+i).css("background-color","#faa");
    lastSelected = i;
}
function updateSelect(){
    var htmlStrUnselect = "<table class='ui selectable table'>";
    var htmlStrSelected = "<table class='ui selectable table'>";
    for(i in shuttleData)
    {
        if(shuttleSelect[i])
            htmlStrSelected += "<tr id='shuttle_tr'><td id='"+shuttleData[i].toString()+"' onclick=\"fillColor('"+shuttleData[i].toString()+"')\">"+shuttleData[i]+"</td></tr>"
        else
        {
            if($("#searchUnselect").val().length==0 || shuttleData[i].indexOf($("#searchUnselect").val())>=0)

            htmlStrUnselect += "<tr id='shuttle_tr'><td id='"+shuttleData[i].toString()+"' onclick=\"fillColor('"+shuttleData[i].toString()+"')\">"+shuttleData[i]+"</td></tr>"
        }            
    }
    htmlStrUnselect += "</table>";
    htmlStrSelected += "</table>";
    $("#divScroll_unselected").html(htmlStrUnselect);
    $("#divScroll_selected").html(htmlStrSelected);
}
function selectAdd(){
    shuttleSelect[shuttleData.indexOf(lastSelected)]=true;
    updateSelect();  
}
function selectMinu(){
    shuttleSelect[shuttleData.indexOf(lastSelected)]=false;
    updateSelect();  
}

<div class="ui floating message shuttle">
    <div class="ui grid">
        <div class="six wide column">
            <div class="ui message" id="selectBorder">
                <div class="ui icon input">
                    <input type="text" placeholder="搜索" onkeyup="updateSelect()" id="searchUnselect">
                    <i class="search icon"></i>
                </div>
                <div id="divScroll_unselected">
                </div>
            </div>
        </div>
        <div class="four wide column">
            <button class="ui right blue mini labeled icon button" onclick="selectAdd()">
            <i class="right arrow icon"></i>添加
            </button>
            </br></br>
            <button class="ui left red mini labeled icon button" onclick="selectMinu()">
            <i class="left arrow icon"></i>删除
            </button>
        </div>
        <div class="six wide column">
            <div class="ui message" id="selectBorder">
                <div id="divScroll_selected">
                </div>
            </div>
        </div>
    </div>    
</div>

.shuttle{
    height: 400px;
}
.shuttle .input{
    width: 100%;
    margin-bottom: 10px;
}
.shuttle table td{
    height: 30px;
}
#shuttle_tr{
    padding: 0px;
    text-align: center;
}
#selectBorder{
    height: 350px;
    padding-top: 5px;
    padding-left: 5px;
    padding-right: 5px;
    padding-bottom: 5px;
}
.shuttle button{
    top:110px;
    margin-bottom: 10px;
    padding: 10px;
    
}
#divScroll_unselected {
    overflow-x: hidden;
    overflow-y: auto;
    position: relative;
    height: 290px;
    width: 100%;
}
#divScroll_selected{
    overflow-x: hidden;
    overflow-y: auto;
    position: relative;
    height: 338px;
    width: 100%;
}