איך עושים שדה input שהמילים נהפכים לתגיות כמו בתיבת כתיבת הודעה של ג'ימייל?

[chagold]

אני רוצה לעשות בצד קליינט (JS-HTML) שדה INPUT כאשר מקלידים מילה היא הופכת ל'תג', כמו כאן ב'תחומים' בהכנסת תגים, כאשר לאחר סיום הקלדת המילה היא מקבלת עיצוב שונה, ויותר חשוב מזה, שאוכל אח"כ לעבד את כל המילים כל מילה בנפרד.
יש ספריות מוכנות לזה?
תודה רבה.

[dovid]

יש שתי ספריות שממש מתאימות לזה, שניהם מיועדות כללית לתיבת רשימה אבל כוללים תמיכה למקרה שלך.
א. chosen
https://harvesthq.github.io/chosen/#multiple-select

ב. select2
https://select2.org/tagging

[chagold]

@dovid תודה רבה!!!!!!!!!!

[chagold]

ב-select2, איך עושים שכשאין נתונים בinput הוא לא יכתוב 'No results found'?
תודה.

[dovid]

https://stackoverflow.com/q/29306727/1271037

[chagold]

מה שהבאת עדיין מציג div.

מה שאני צריך זה זה
(אבל זה לא הולך לי..)
התחלתי כאן

ושאלה נוספת. אני מנסה לעשות שכל פסיק או רווח הוא יגדיר אופציה חדשה. הבנתי שזה מה שמופיע כאן, אבל למרות שלכולם זה הולך, לי לא...
תודה

[dovid]

אם אתה רוצה שלא יוצג כלום, צריך לקמבן. הלינק שהבאת מאוד פשוט, לא ראיתי שעשית צעד לחקות אותו - הוא פשוט מסתיר את הקלאס .select2-results__message:
https://jsfiddle.net/rj5h9Ljp/ אבל זה לא נראה כל כך טוב. אפשר אולי לכתוב JS לזה, צריך קצת לחפור.

בקשר להגדרת מפרידי התגיות, תביא לינק לניסוי שלך שלא צלח. תשתדל לעשות זאת בjsfiddle ודומיו.

[chagold]

אני מפנה כאן לאשכול אחר, שאולי שם יפתור את כל הבעיות יחד
http://tchumim.com/topic/2158/עזרה-בselect2/3
תודה.