2013年9月17日 星期二

製作類似 facebook, G+的使用者自動完成效果- jquery.mentionsInput

plugin 位置
jquery.mentionsInput

最近的一個需求,就是要完成類似 facebook 和 g+ 的一個效果: 在編輯的時候按了"@",可以有提示列表跑出來,進而選擇要tag的人,這樣可以減少打字的時間和避免打錯的情況發生。

因為這個需求才去研究結構,發現要做這個UI,他會分成兩段,上面是可以輸入內容的textarea,下面則是一層會根據textarea變化的div,在偵測輸入"@"後,用ajax撈出建議的內容,確認後會把內容同時丟到textarea和div內,並在div那層加上標註的底色。

不過要全部實作有點辛苦,找到plugin就節省很多時間了。

  1. <script src='http://documentcloud.github.com/underscore/underscore-min.js' type='text/javascript'></script>  
  2. <script src='js/plugins/jquery.events.input.js' type='text/javascript'></script>  
  3. <script src='js/plugins/jquery.elastic.js' type='text/javascript'></script>  
  4. <script src='js/plugins/jquery.mentionsInput.js' type='text/javascript'></script>  

然後照他的範例使用就好了,但我整包下載後出現一個問題,就是input的欄位高度會亂跳,我有在js跟css的部分做一些調整。

存到資料庫我就存html的部分。
  1. $content=$(".mentions").html();  

然後要從資料庫把值取回來再編輯,就把html抓回來,html的部分直接丟到div內,處理掉tag後丟回textarea內就可以正常呈現了
  1. $input_con="<div>hello <strong><span>Kenneth Hulthin</span></strong> <br>how are you.</div>";   
  2. //因為要在textarea正常呈現,所以用\n取代<br>   
  3. $input_textarea=$input_con.replace("<br>","\n");   
  4. //去除html的tag   
  5. function RemoveHTML( strText ) {    
  6.     var regEx = /<[^>]*>/g;   
  7.     return strText.replace(regEx, "");   
  8. }   
  9. $input_textarea=RemoveHTML($input_textarea);   
  10. //再把值丟回去就完成了   
  11. $(".mentions").html($input_con);   
  12. $(".mention").val($input_textarea);  

好用的工具,有需要的可以試試看。
反應:

0 意見:

Related Posts Plugin for WordPress, Blogger...