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

張貼者： 日期：
plugin 位置
jquery.mentionsInput

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

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

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

view plaincopy to clipboardprint
  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的部分。
view plaincopy to clipboardprint
  1. $content=$(".mentions").html();  

然後要從資料庫把值取回來再編輯，就把html抓回來，html的部分直接丟到div內，處理掉tag後丟回textarea內就可以正常呈現了
view plaincopy to clipboardprint
  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);  

好用的工具，有需要的可以試試看。

留言

張貼留言