js 实现左右框数据选择和搜索

最终实现效果

dom代码

<div id="peoples" style="padding:40px;">
<div id="leftContent" style="float:left;width:380px;border:1px solid #c9c9c9">
</br><h1 style="text-align:center">可选人员</h1></br>
<span style="margin-left:10%"><input type="text" id="canChooseInput" />&nbsp;&nbsp;&nbsp;<button οnclick="canSearch();">搜索</button>
</br></br>
<div id="canChoose" style="maring:2px;border:2px slid black">
</div>
</div>
<div style="float:left;width:120px;"></br></br></br>
<span style="margin-left:25%"></span><button οnclick="toRight();">添加&gt;&gt;</button></br></br>
<span style="margin-left:25%"><button οnclick="toLeft();">删除&lt;&lt;</button>
</div>
<div id="rightContent" style="float:left;width:380px;border:1px solid #c9c9c9">
</br><h1  style="text-align:center">已选人员</h1></br>
<span style="margin-left:10%"><input type="text" id="choosedInput" />&nbsp;&nbsp;&nbsp;<button οnclick="choosedSearch();">搜索</button>
</br></br>
<div  id="choosed" style="maring:2px;border:2px slid black;"></div>
</div>

</div>

js 控制如下

1 //向后台发送请求，查找所有的风控对接人
var peoples = "${statics["com.busiinfo.creditManage.common.creditClientGetDataUtils"].getRiskManagementPeople()?default("")}";
var ps = peoples.split(",");
for(var n=0;n<ps.length;n++){
$("#canChoose").append("<button οnclick='addCache(this);'  style='background:white;margin:6px;padding:3px 6px;border-radius:8px;cursor:pointer'>"+ps[n]+"</button>");

}

2

var cacheDataRight = "";//保存最新的要添加到右侧的数据
function addCache(obj){
var dd = $(obj).text();
//样式控制
var zz = obj.style.background;
if(zz.indexOf("green") >= 0){
$(obj).css("background","white");
$(obj).css("color","black");
}else{
$(obj).css("background","green");
$(obj).css("color","white");
}
if(cacheDataRight.indexOf(dd) >=0){//过滤掉已经存在的数据
var arr ="";
var arrs = cacheDataRight.split(",");
for(var i=0;i<arrs.length;i++){
if(arrs[i] != dd){
arr += arrs[i]+",";
}
}
cacheDataRight = arr;
}else{
cacheDataRight += dd+",";
}
//alert(cacheDataRight)
}
function toRight(){
var arrs = cacheDataRight.split(",");
for(var j=0;j<arrs.length;j++){
var aa = arrs[j];
if(aa != "" && aa != null){//空值不添加
var rightContent = $("#rightContent").text();
if(rightContent.indexOf(aa) <0){//右侧不存在的添加
$("#choosed").append("<button οnclick='addCacheLeft(this);'  style='background:white;margin:5px;padding:3px 6px;border-radius:8px;cursor:pointer'>"+aa+"</button>");
//删除左侧该值
var bb = $("#leftContent button");
for(var k=0;k<bb.length;k++){
if($(bb[k]).text() == aa){
//删除该数据
$(bb[k]).remove();
}
}
//将cacheDataRight缓存中的数据删除
if(cacheDataRight.indexOf(aa) >=0){
var arr ="";
var arrs = cacheDataRight.split(",");
for(var i=0;i<arrs.length;i++){
if(arrs[i] != aa && arrs[i] != "" && arrs[i] != null){
arr += arrs[i]+",";
}
}
cacheDataRight = arr;
}
}
}
}
}
var cacheDataLeft = "";//保存最新的要添加到左侧的数据(从右侧内容区取)
function addCacheLeft(obj){
var dd = $(obj).text();
//样式控制
var zz = obj.style.background;
if(zz.indexOf("green") >= 0){
$(obj).css("background","white");
$(obj).css("color","black");
}else{
$(obj).css("background","green");
$(obj).css("color","white");
}

if(cacheDataLeft.indexOf(dd) >=0){//过滤掉已经存在的数据
var arr ="";
var arrs = cacheDataLeft.split(",");
for(var i=0;i<arrs.length;i++){
if(arrs[i] != dd){
arr += arrs[i]+",";
}
}
cacheDataLeft = arr;
}else{
cacheDataLeft += dd+",";
}
//alert(cacheDataLeft)
}
function toLeft(){
var arrs = cacheDataLeft.split(",");
for(var j=0;j<arrs.length;j++){
var aa = arrs[j];
if(aa != "" && aa != null){//空值不添加
var leftContent = $("#leftContent").text();
if(leftContent.indexOf(aa) <0){//左侧不存在的添加
$("#canChoose").append("<button οnclick='addCache(this);'  style='background:white;margin:5px;padding:3px 6px;border-radius:8px;cursor:pointer'>"+aa+"</button>");
//删除右侧该值
var bb = $("#rightContent button");
for(var k=0;k<bb.length;k++){
if($(bb[k]).text() == aa){
//删除该数据
$(bb[k]).remove();
}
}
//将cacheDataLeft缓存中的数据删除
if(cacheDataLeft.indexOf(aa) >=0){
var arr ="";
var arrs = cacheDataLeft.split(",");
for(var i=0;i<arrs.length;i++){
if(arrs[i] != aa && arrs[i] != "" && arrs[i] != null){
arr += arrs[i]+",";
}
}
cacheDataLeft = arr;
}
}
}
}
}
//左侧搜索
function canSearch(){
var canValue = $("#canChooseInput").val();
var bb = $("#canChoose button");
//alert(canValue+"||"+$(bb[1]).text())
for(var s=0;s<bb.length;s++){
if($(bb[s]).text() == canValue){
addCache(bb[s]);
}
}
}
//右侧搜索
function choosedSearch(){
var choosedValue = $("#choosedInput").val();
var bb = $("#choosed button");
//alert(choosedValue+"||"+$(bb[1]).text())
for(var s=0;s<bb.length;s++){
if($(bb[s]).text() == choosedValue){
addCacheLeft(bb[s]);
}
}
}