title: How to create buttons in a textfield just like in the Mail app?
body: <p><strong>Background:</strong> When you open the Mail.app and compose a new email, in the <code>To:</code> textfield when you start typing you see regular text characters. However when it recognizes a name a list pops up and when you select an e-mailadress the text you typed converts into a blue button with it's own options and you are able to rearrange it with other blue buttons by clicking and dragging.</p>
  
  <p><strong>Intention:</strong> I like a user to drag elements into a textfield, which they can rearrange and combine with normal text characters. </p>
  
  <p>For example, let's say we have an element <code>First Name</code> and an element <code>Last Name</code>. They can drag this in to the textfield where they become blue buttons. They can then edit the textfield to say something like: [ Hello <code>First Name</code> <code>Last Name</code>, ]</p>
  
  <p><strong>Question:</strong> How can I create these blue buttons within a textfield?</p>
  
  <p><a href="https://i.stack.imgur.com/baCcp.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/baCcp.png" alt="enter image description here"></a></p>