How can I make a dropdown like Github's collaborators menu where the input text is not exactly the same as the dropdown items' text?

Question

I have an HTML5 input field with a bootstrap dropdown menu. When selecting a dropdown item in a normal bootstrap dropdown menu, this action populates the input field with the same exact text as in that dropdown item. How can I make the action of selecting a dropdown item update the text in the input field to a string that is not exactly the same as the text in the dropdown item? For example, the github collaborators dropdown displays only the username in the input field, but displays the username and name of the users in the dropdown items.

For an example, go to any github repository you own or have forked. Select Settings and then select Collaborators.

Answer 1

Imagine you have some data like that :

users: [
  {
    'name': 'Thomas Edison',
    'email' '[email protected]',
    'selected': false
  },
  {
    'name': 'William Thomson',
    'email': '[email protected]'
    'selected': false
  }
]

Then you just have to loop through your data in your v-for element :

<div v-for="user in users" class="dropdown">
  <span class="user" @click="user.selected = true">{{ user.email }} - {{ user.name }}</span>
</div>

Then in your input field, you have to loop through your users where the selected property is set to true, and only display user.name, as an example.