仿开心网好友选择模块

功能效果图如下：

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

PS:2009.11.19 新增鍵盤上、下、回車、退格按鍵的事件

                        新增對已選擇好友的重複過濾和好友面板的預選擇

                        對之前的一些小BUG進行了修復

     2009.12.4   修復了一些朋友提出的BUG

                        新增了數據輸出功能

 

 

Demo演示地址：http://justname.whleer.com/selectfriend.html

 

关键代码如下： 

getData:function(oo){
  var _data=this.FullData(),group='';
  if(oo!=undefined){//如果經過好友選擇框觸發，則加入此條件
    group=oo.options[oo.selectedIndex].value;
    this.friendList.innerHTML='';
    var selAll=get('selall');
    selAll.style.display=(group=='')?'none':'inline';
  }
  if(_data.length>0){
   var oFrag=document.createDocumentFragment();//創建文檔碎片對象，在所有文檔遍歷完成之後一次性插入到頁面顯示，避免多次頁面操作產生頁面閃爍
   var slist=get('fri','div',this.fribox),flag;
   for(var i=0,dLen=_data.length;i<dLen;i++){
    if(group!=''&&_data[i].type!=group){continue;}
    flag=this.strip(slist,_data[i].real_name[0]);
    var oNod=document.createTextNode(_data[i].real_name[0]);
    var oInput=document.createElement('input');
     oInput.type='checkbox';
     oInput.setAttribute('title',Lang.zh_CN.id+_data[i].uid);
    var oLi=document.createElement('li');
     oLi.setAttribute('title',Lang.zh_CN.id+_data[i].uid);
     oLi.appendChild(oInput);
     oLi.appendChild(oNod);
     oFrag.appendChild(oLi);
     if(flag==false){oInput.checked=true;}
   }
   this.friendList.appendChild(oFrag);
  }
 },
 getGroup:function(e){
  var target=this.getEvent(e);
  this.flag=false;
  this.getData(target);
 },
 showfriendbox:function(e){
     var target=this.getEvent(e);
     target.blur();
     if(this.friendList.getElementsByTagName('input').length==0){this.getData();}//讀取并創建好友列表
     this.select.className=(this.select.className=='on')?'selbtn':'on';
     this.listbox.style.top=this.fribox.clientHeight+6+'px';
     if(this.autobox!=null){this.autobox.style.display='none';}
     this.listbox.style.display=(this.listbox.style.display=='block')?'none':'block';
 },
 insertDIV:function(nod,cNod){
  var delObj=function(e){
   var evt=e||window.event;
      var target=evt.srcElement||evt.target;
   target.parentNode.parentNode.removeChild(target.parentNode);
  }
  var img=document.createElement('img');
   img.src='http://img1.kaixin001.com.cn/i2/del.gif';
   img.setAttribute('alt',Lang.zh_CN.del,true);
   addEventHandler(img,'click',delObj);//創建刪除按鈕并綁定事件
  var odiv=document.createElement('div');
   odiv.className='fri';
   odiv.innerHTML=cNod+'  ';
   odiv.appendChild(img);
  nod.appendChild(odiv);
  img=odiv=null;
 },
 strip:function(from,to){
  for(var j=0,slen=from.length;j<slen;j++){
   var oInner=batch(from[j].innerHTML);
   if(oInner==to){
    return flag=false;
   }
  }
  return true;
 },
 doSubmit:function(e){
     var flist=this.friendList.getElementsByTagName('input'),slist=get('fri','div',this.fribox),selList=[],friList=[];
     if(!flist||flist.length==0){alert(Lang.zh_CN.select);}
     for(var i=0,flen=flist.length;i<flen;i++){
      if(flist[i].checked==true){
       friList.push(batch(flist[i].parentNode.innerHTML));
      }
     }
  var oFrag=document.createDocumentFragment(),flag;
  if(slist.length>0){
   for(var i=0,olen=friList.length;i<olen;i++){
    flag=this.strip(slist,friList[i]);
    if(flag==true){this.insertDIV(oFrag,friList[i]);}
   }
  }else{
   for(var i=0,olen=friList.length;i<olen;i++){
    this.insertDIV(oFrag,friList[i]);
   }
  }
  this.fribox.insertBefore(oFrag,this.input);
  this.listbox.style.display='none';
 },
 over:function(e){
     this.submit.className='gb2-12';
 },
 out:function(e){
     this.submit.className='gb1-12';
 },
 autoComplete:function(e){
     if(!this.autobox){
      this.autobox=new this.create('div','autobox',this.fribox);
     }
  var target=this.getEvent(e);
  if (target&&this.autobox!=null){this.keyDown(target,e);}
     this.autobox.style.top=this.input.offsetTop+this.input.offsetHeight+6+'px';
     this.autobox.style.left=this.input.offsetLeft-3+'px';
     this.fribox.parentNode.style.borderLeft=this.fribox.parentNode.style.borderTop='1px #000000 solid';
     this.tip.style.display='none';
 },
 run:function(path){
  this.Arr.push(this.index);
  if(this.Arr.length%2==0){
   var allfriList=get('*','div',this.autobox);
   if(allfriList.length==0){return;}
   allfriList[this.index].style.backgroundColor="";
   if(path=='down'){
    if(allfriList[this.index+1]){
     allfriList[this.index+1].style.backgroundColor="#F2F6FB";
     this.index++;
    }else{
     allfriList[0].style.backgroundColor="#F2F6FB";
     this.index=0;
     this.Arr.length=0;
    }
   }else{
    if(allfriList[this.index-1]){
     allfriList[this.index-1].style.backgroundColor="#F2F6FB";
     this.index--;
    }else{
     allfriList[allfriList.length-1].style.backgroundColor="#F2F6FB";
     this.index=allfriList.length-1;
     this.Arr.length=0;
    }
   }
  }
 },
 keyDown:function(iobj,e){
  if (document.all){
   var keycode=event.keyCode;
  }else{
   var keycode=e.which;
  }
  var target=this.getEvent(e),searchtxt=target.value.replace(/\s/ig,''),innerdivhtml="",alldiv=isyouselect=0,sdiv=this.autobox,nowsel=true;
  switch(keycode){
  case 40:/*鍵盤下按鍵*/
   this.run('down');
   break;
  case 38:/*鍵盤上按鍵*/
   this.run('up');
   break;
  default:
   this.keyword.push(this.input.value);//分別捕獲keydown和keyup時候的input.value，放入到數組之中
   var selFri=get('fri','div',this.fribox);
   if(keycode==8){
  //  console.debug(this.keyword[this.keyword.length-2]+"||"+this.keyword[this.keyword.length-1]);
    if(selFri.length>0&&this.keyword[this.keyword.length-2]==''){//刪除時需要keydown時捕獲的input.value來判斷是否需要刪除最後一個好友。如果使用keyup時的value，則會在value為1個字母的時候就開始刪除最後一個好友
     this.keyword.length=0;
     if(selFri[selFri.length-1]){this.fribox.removeChild(selFri[selFri.length-1]);this.input.focus();return false;};
    }
   }
   if (searchtxt==""){
    sdiv.innerHTML=Lang.zh_CN.tip;
    sdiv.style.display="block";
    return false;
   }
   nowsel=true;
   var _data=this.FullData();
   for (i=0;i<_data.length;i++){
    if (_data[i].real_name[0].substr(0,searchtxt.length).toLowerCase()==searchtxt||_data[i].real_name[1].substr(0,searchtxt.length).toLowerCase()==searchtxt||_data[i].real_name[2].substr(0,searchtxt.length).toLowerCase()==searchtxt){
     alldiv++;
     innerdivhtml=innerdivhtml+"<div>"+_data[i].real_name[0]+"</div>";
     if ((searchtxt==_data[i].real_name[0]||searchtxt==_data[i].real_name[1]||searchtxt==_data[i].real_name[2]) && isyouselect==0){
       this.index++;
       isyouselect=1;
     }
    }
   }
   if (alldiv!=0 && innerdivhtml!=""){
    sdiv.innerHTML=innerdivhtml;
    var autoList=get('*','div',this.autobox),_strip=this.strip;
    var _getEvent=this.getEvent,_input=this.input,_autobox=this.autobox,_fribox=this.fribox,_insert=this.insertDIV;
    var mouseover=function(e){
     var tar=_getEvent(e);
     tar.style.backgroundColor="#F2F6FB";
    }
    var mouseout=function(e){
     var tar=_getEvent(e);
     tar.style.backgroundColor=""; 
    }
    var  doSelect=function(e,theObj){
     var tar=(theObj)?theObj:_getEvent(e),oInner=batch(tar.innerHTML);
     var slist=get('fri','div',_fribox),oFrag=document.createDocumentFragment();
     var flag=_strip(slist,oInner);
     if(flag==true){
      _insert(oFrag,oInner);
      _fribox.insertBefore(oFrag,_input);
     }
     _input.value='';
     sdiv.style.display='none';
    }
    var getValue=function(e){
     var tar=_getEvent(e),thisValue=batch(tar.innerHTML);
     _input.value=(thisValue=='')?batch(autoList[0].innerHTML):thisValue;
    }
    if(keycode==13){
     if(this.keyword.length%2==0){
       var allfriList=get('*','div',this.autobox);
       doSelect(e,allfriList[this.index]);
       this.keyword.length=0;
       this.index=0;
       return;
     }
    }
    addEventHandler(autoList,'mouseover',mouseover);
    addEventHandler(autoList,'mouseout',mouseout);
    addEventHandler(autoList,'click',doSelect);
    sdiv.style.backgroundColor='#fff';
   }
   else{
      if (searchtxt){
     sdiv.innerHTML=Lang.zh_CN.empty;
     sdiv.style.backgroundColor='#eee';
      }
    this.index=0;
   }
   sdiv.style.display="block";
   return false;
  }
 },

 

评论

29 楼 heavilyarmed 2009-12-10  

呵呵   功能很好

28 楼 海阔天空love 2009-12-10  

顶。。。功能很好。。。很值得学习。。。

27 楼 ayue222 2009-12-04  

因為這段時間比較忙。。所以一直拖到今天才修復完善這個小程序。。所有已知BUG都已經修復，并新增了幾位朋友提到的選擇數據輸出的功能，請各位朋友重新下載文件包~

感謝各位朋友的熱心建議和測試。。

26 楼 pn2008 2009-11-29  

????如何得到选择了那些好友呢？？？

25 楼 pn2008 2009-11-29  

怎么取得已选择任意信息呢？

24 楼 ayue222 2009-11-23  

cuixiping 写道

ayue222 写道

附件包再次更新
修復過濾重複好友的重大BUG。。。。。

1.
先点下拉选择好友，再在输入框中输入进行选择，回车，再点下拉选择好友，看到，下拉框里的名单变成双份了；再在输入框中输入，回车，再点下拉，下拉框里的名单变成3份了；一直下去，就4份，5份，，。。。

2.
输入lf出现“刘菲”单独一个选项时，选择，回车，这时出问题了，本来应该是[刘菲x]的，但现在只有个小小的[x]。
只要是拼音首字母输全了，就会出这个问题。比如“丁宗秋”，输入d或者dz进行选择是正常的，但是输入dzq进行选择就不行了。

我看，楼主是不是弄个demo网址呢，比较方便大家测试。

============>
昏倒。。。上周灰常忙，匆匆改了下，没想到会有这么大的BUG存在，灰常对不起大家了~
这礼拜继续在忙着。。抽时间把问题fixed。。。感谢大伙的关心和建议。

23 楼 cuixiping 2009-11-21  

ayue222 写道

附件包再次更新
修復過濾重複好友的重大BUG。。。。。

1.
先点下拉选择好友，再在输入框中输入进行选择，回车，再点下拉选择好友，看到，下拉框里的名单变成双份了；再在输入框中输入，回车，再点下拉，下拉框里的名单变成3份了；一直下去，就4份，5份，，。。。

2.
输入lf出现“刘菲”单独一个选项时，选择，回车，这时出问题了，本来应该是[刘菲x]的，但现在只有个小小的[x]。
只要是拼音首字母输全了，就会出这个问题。比如“丁宗秋”，输入d或者dz进行选择是正常的，但是输入dzq进行选择就不行了。

我看，楼主是不是弄个demo网址呢，比较方便大家测试。

22 楼 310628570 2009-11-20  

哈哈 不错啊  支持一下~~

21 楼 ayue222 2009-11-19  

附件包再次更新
修復過濾重複好友的重大BUG。。。。。

20 楼 ayue222 2009-11-19  

2009.11.19 新增鍵盤上、下、回車、退格按鍵的事件

             新增對已選擇好友的重複過濾和好友面板的預選擇

             對之前的一些小BUG進行了修復

下載鏈接已經update，各位童鞋請到頂樓下載。。

19 楼 ayue222 2009-11-18  

cuixiping 写道

下载来看了下，bug挺多的，不具备实用性啊。

1，输入字母键的时候，弹出下拉选单的项似乎不准，不知道楼主按的是什么规则过滤。
2，点击右边下拉选择区出来后，原来的弹出下拉菜单没有隐藏掉。
3，已经选择的好友，删除后，再点右侧弹出选择区，里面还是勾上的。
4，按键弹出下拉选单，选择后，再点右侧弹出选择区，里面却没有勾上。

-->
1、請看看data數據源就明白了，當時因為偷懶，除了前面幾人更改了拼音之外，後面的拼音都是一樣的，如果按照名字把拼音更改好的話就不會有這個問題
2、此問題沒有注意到，多謝提醒
3、4、已選擇好友在好友選擇區內并沒有關聯起來，而且在按鍵彈出的自動提示層上選擇的好友都沒有重複檢測的。。

18 楼 cuixiping 2009-11-18  

下载来看了下，bug挺多的，不具备实用性啊。

1，输入字母键的时候，弹出下拉选单的项似乎不准，不知道楼主按的是什么规则过滤。
2，点击右边下拉选择区出来后，原来的弹出下拉菜单没有隐藏掉。
3，已经选择的好友，删除后，再点右侧弹出选择区，里面还是勾上的。
4，按键弹出下拉选单，选择后，再点右侧弹出选择区，里面却没有勾上。

17 楼 ayue222 2009-11-17  

让你笑了 写道

功能很强大,也很漂亮,用起来也很方便...

貌似有些...比如上下键选择,DEL键....

上下按键滚动选择等功能有空的时候会添加上，之前是因为没有这个需求。。呵呵
这次更改了发帖方式之后修改了一点细微的地方，请大家斧正。

16 楼 让你笑了 2009-11-17  

功能很强大,也很漂亮,用起来也很方便...

貌似有些...比如上下键选择,DEL键....

15 楼 nishijia 2009-11-17  

这仿得很强大
把编码改为 GBK 就ok了

14 楼 ayue222 2009-11-17  

瀑布汗。。俺還不會在這裡貼圖上傳附件。。。立馬學習改進
感謝各位兄弟支持、建議

13 楼 xiaoxie2007 2009-11-17  

功能不错，楼主什么时间有空也整理一个比较好点：不乱码、可执行的例子添加到附件中来就更好了

12 楼 liua2003 2009-11-17  

功能确实强大

11 楼 cds1118 2009-11-16  

呵呵  拷贝流飘过~~ 很强大 就是字体乱码 再加点注释就好了

10 楼 jolongriver 2009-11-16  

仿的很真。。 。。。。