show users as suggestions, not in constrained list

src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/Referrer.vue

@@ -15,9 +15,20 @@
          v-bind:searchable="true"
          v-bind:placeholder="$t('referrer.placeholder')"
          v-model="value"
-         v-bind:options="referrersAvailable"
+         v-bind:options="users"
          @select="updateReferrer">
       </VueMultiselect>
+
+
+      <template v-if="referrersSuggested.length > 0">
+        <ul>
+          <li v-for="u in referrersSuggested" @click="updateReferrer(u)">
+            <user-render-box-badge :user="u"></user-render-box-badge>
+          </li>
+        </ul>
+      </template>
+
+
    </div>
 
    <div>
@@ -41,14 +52,26 @@
 import VueMultiselect from 'vue-multiselect';
 import { getUsers, whoami } from '../api';
 import { mapState } from 'vuex';
+import UserRenderBoxBadge from "ChillMainAssets/vuejs/_components/Entity/UserRenderBoxBadge";
 
 export default {
    name: "Referrer",
-   components: { VueMultiselect },
+   components: {
+     UserRenderBoxBadge,
+     VueMultiselect,
+   },
    computed: {
       ...mapState({
          value: state => state.accompanyingCourse.user,
-         referrersAvailable: state => state.referrersAvailable,
+         users: state => state.users,
+         referrersSuggested: state => {
+           return state.referrersSuggested.filter(u => {
+             if (null === state.accompanyingCourse.user) {
+               return true;
+             }
+             return state.accompanyingCourse.user.id !== u.id;
+           })
+         },
       }),
    },
    methods: {