2013-12-22 76 views
7

我使用下面的代碼來簡單地搜索和標記朋友到文本字段上,然後傳遞給Ajax Post。正如你從我的形象中看到的,我只能讓用戶一個接一個地給朋友貼標籤。我不想限制用戶只輸入朋友的姓名來標記,我想模仿Facebook和Twitter,並允許用戶鍵入狀態更新,然後當他們鍵入'@'時,調用select2執行ajax調用以搜索朋友。 這裏是我當前的代碼:使用Select2插件標記Twitter和Facebook

我在阿賈克斯後使用隨後使用選定的IDS返回:

var tagged_friends = $("#tag_friends").select2("val"); 

下面是它目前的樣子:Limited Tagging I have Now

我工作一週沒有任何進展,我需要它看起來像下面的圖像: enter image description here

當用戶鍵入@時,標籤將被啓動。另外,任何想法如何我可以抓住用戶標識後,有人標記了一些朋友?

我碰到了一堵鋼牆。任何幫助將不勝感激。

謝謝。

+0

你取得任何進展或對這個任務的狀態更新? – angabriel

回答

0

如果我理解正確,你會嘗試寫一個自由文本輸入,對特殊字符@作出反應,然後顯示一個內聯select2以顯示所有可用項目(這裏是朋友)。

我只能允許用戶標記的朋友一個又一個
你一定會需要一個以上選擇2爲標記可以在文本的任何地方出現。據我所知,select2不能用一個「widget」元素來做到這一點。

所以問題不在於select2,而是周圍的文本輸入。正常情況下,<input><textarea>無法在文本內顯示html元素,您可以嘗試使用contenteditable

<!DOCTYPE html> 
... 
<script> 
    $(document).ready(function() { 
    $('.friendsAwareTextInput').keypress(function(e) { 
     // if char is @, append a select2 input element right after it to the DOM 
     // and call select2 on it with your options. 
    }); 
    }) 
</script> 
... 
<div contenteditable="true" class="friendsAwareTextInput"> 
</div> 

可能會有所幫助:
Insert html at caret in a contenteditable div

+0

對不起。這根本沒有幫助。 – user1011713

+0

m8,我在這個答案上投入了相當多的時間。 **這種評論並沒有什麼幫助,因爲你不是說**爲什麼**它沒有幫助。一般來說,你對這個問題的行爲是:你問了8!幾天前,告訴我們它花了整整一週的時間,但這些日子你都保持沉默。表明你對解決問題的興趣很低。我們需要反饋,因爲沒有人能夠提出完美的問題。對不起,但它很明顯這不值得50 +賞金。備份我的論點:請閱讀**第一句**這裏http://stackoverflow.com/help/bounty。 – angabriel

+0

我無法使用任何代碼從您的答案遠程嘗試任何東西。此外,「這是一個相當大的任務,也是一個很好的例子,爲什麼越來越多的人說:」怎麼會這麼辛苦/花費那麼多時間 - 臉書和谷歌這樣做「......」並不是很有幫助。最後,我粘貼了你的答案中基本忽略的代碼行。同樣考慮到我的評論,「我碰到了鋼鐵牆」,很難想象我的問題會有更新。 – user1011713

0

我只是偶然發現了一個Github的項目,該項目可能會解決你的問題:

http://kylegibson.github.io/select2-mentions/

+0

它很接近,但它只是「將它與另一個輸入或textarea關聯」。我需要在一個textarea或input中輸入所有內容,並根據是否輸入@提及來調用select2。 – user1011713