Tagging wie Twitter und Facebook Verwenden des Select2-Plugins

Ich verwende den folgenden Code, um Freunde einfach in einem Textfeld zu suchen und zu markieren, das ich dann an einen Ajax-Post weiterleite. Wie Sie aus meinem Bild sehen, kann ich Benutzern nur erlauben, Freunde nacheinander zu markieren. Statt Benutzer darauf zu beschränken, nur die Namen der Freunde zum Taggen einzugeben, möchte ich Facebook und Twitter emulieren und Benutzern erlauben, eine Statusaktualisierung einzugeben. Wenn sie dann '@' eingeben, rufen Sie select2 auf, um einen Ajax-Anruf für die Suche nach Freunden auszuführen. Hier ist mein aktueller Code:Tagging wie Twitter und Facebook Verwenden des Select2-Plugins

ich das nachher in meiner Ajax-Post verwenden, um die ausgewählten IDs verwenden zurückgegeben:

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

Hier ist, wie es aussieht, zur Zeit: Limited Tagging I have Now

ich gearbeitet habe eine Woche ohne jeden Fortschritt und ich brauche es, um das folgende Bild zu sehen: enter image description here

Das Tagging wird initiiert, wenn der Benutzer @ eingibt. Auch irgendwelche Ideen, wie ich die Benutzer-IDs ergreifen könnte, nachdem jemand einige Freunde getaggt hat?

Ich habe eine Stahlwand geschlagen. Jede Hilfe würde sehr geschätzt werden.

Vielen Dank.

Quelle

2013-12-22 user1011713

Haben Sie Fortschritte machen oder ein Status-Update auf diese Aufgabe haben? – angabriel

Wenn ich richtig verstehe, Sie versuchen, eine Freitexteingabe zu schreiben, die @ die spezielle Zeichen reagiert, die dann select2 ein Inline-Anzeigen sollten alle verfügbaren Elemente angezeigt werden (hier Freunde).

Ich kann nur Benutzern erlauben, Freunde einer nach dem anderen
Sie werden auf jeden Fall mehr als ein select2 müssen Tag wie die Tags irgendwo im Text erscheinen. Soweit mir bekannt ist, kann select2 dies nicht mit einem einzelnen "widget" -Element tun.

Also das Problem ist nicht mit select2, sondern die umgebende Texteingabe. Wie üblich <input> oder <textarea> sind nicht in der Lage, HTML-Elemente innerhalb des Textes anzuzeigen, können Sie versuchen, mit contenteditable zu arbeiten.

<!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>

finden könnte dies hilfreich:
Insert html at caret in a contenteditable div

Quelle

2013-12-29 19:26:07 angabriel

Entschuldigung. Dies hilft überhaupt nicht. – user1011713

m8, ich habe viel Zeit in diese Antwort investiert. ** Diese Art von Kommentar hilft nicht einmal mehr, weil du nicht sagst, warum es nicht geholfen hat. Dasselbe gilt für Ihr Verhalten bei dieser Frage: Sie haben es 8 gefragt! Vor einigen Tagen hat es uns gesagt, dass du eine ganze Woche gebraucht hast, aber du warst die ganzen Tage still. Anzugeben, dass Ihr Interesse an der Lösung gering war. Wir brauchen Feedback, da niemand eine perfekte Frage aussprechen kann. Entschuldigung, aber es ist offensichtlich, dass dies nicht ein 50+ Kopfgeld wert ist. Um meine Argumente zu sichern: Bitte lesen Sie den ** ersten Satz ** hier http://stackoverflow.com/help/bounty. – angabriel

Ich kann keinen Code aus Ihrer Antwort verwenden, um etwas aus der Ferne zu versuchen. Auch dies, "Das ist eine ziemlich große Aufgabe und ein gutes Beispiel, warum immer mehr Leute sagen:" Wie kann es so schwer sein/so viel Zeit nehmen - Facebook und Google machen es "..." ist nicht sehr hilfreich . Schließlich fügte ich Codezeilen ein, die in Ihrer Antwort grundsätzlich ignoriert wurden. In Anbetracht meines Kommentars "Ich habe eine Stahlwand geschlagen", ist es schwer vorstellbar, eine Aktualisierung meiner eigenen Frage vorzunehmen. – user1011713

Ich stolperte über einem Github-Projekt, das Ihr Problem lösen könnte:

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

Quelle

2014-01-09 10:54:52 Tobi

Es ist nah, aber es ist nur "mit einem anderen Eingang oder Textarea". Ich brauche alles in einem Textfeld oder einer Eingabe und variiere den Aufruf von select2 basierend darauf, ob @ Erwähnung eingegeben wurde. – user1011713

Für diejenigen, die auf diese Frage stolpern in der Zukunft ...

Ich hatte das gleiche Problem & eine ziemlich gute Lösung gefunden:

https://github.com/oozou/jquery-mentionable

ich gegabelt, dass Repo, um es auf meine Bedürfnisse anzupassen.Zum Beispiel wird es nun einen versteckten Eingang für jeden Benutzer hinzufügen, die Sie markieren:

https://github.com/Root-XS/jquery-mentionable

Quelle

2015-03-10 18:40:16 mopo922

Tagging wie Twitter und Facebook Verwenden des Select2-Plugins

Antwort

Verwandte Themen