diff --git a/src/components/chat/channels/ChannelInvitation.vue b/src/components/chat/channels/ChannelInvitation.vue
index cf38aa1..930b7b1 100644
--- a/src/components/chat/channels/ChannelInvitation.vue
+++ b/src/components/chat/channels/ChannelInvitation.vue
@@ -2,11 +2,13 @@
   <v-card prepend-icon="mdi-account-plus" title="Invite someone">
     <v-form @submit.prevent="inviteMember">
       <v-card-text>
-        <v-text-field
+        <v-autocomplete
           label="Username"
           variant="outlined"
           density="comfortable"
-          hint="Require username not the nickname"
+          autocomplete="off"
+          hide-selected
+          :items="friends.available.map(x => getOtherside(x).name)"
           v-model="targetName"
         />
       </v-card-text>
@@ -23,11 +25,15 @@
 <script setup lang="ts">
 import { ref } from "vue"
 import { request } from "@/scripts/request"
-import { getAtk } from "@/stores/userinfo"
+import { getAtk, useUserinfo } from "@/stores/userinfo"
+import { useFriends } from "@/stores/friends"
 
 const props = defineProps<{ item: any }>()
 const emits = defineEmits(["close", "error", "relist"])
 
+const id = useUserinfo()
+const friends = useFriends()
+
 const loading = ref(false)
 
 const targetName = ref("")
@@ -51,4 +57,12 @@ async function inviteMember(evt: SubmitEvent) {
   }
   loading.value = false
 }
+
+function getOtherside(item: any) {
+  if (item.account_id === id.userinfo.data?.id) {
+    return item.related
+  } else {
+    return item.account
+  }
+}
 </script>
diff --git a/src/components/realms/RealmInvitation.vue b/src/components/realms/RealmInvitation.vue
index d13b2af..37fb1d2 100644
--- a/src/components/realms/RealmInvitation.vue
+++ b/src/components/realms/RealmInvitation.vue
@@ -2,11 +2,13 @@
   <v-card prepend-icon="mdi-account-plus" title="Invite someone">
     <v-form @submit.prevent="inviteMember">
       <v-card-text>
-        <v-text-field
+        <v-autocomplete
           label="Username"
           variant="outlined"
           density="comfortable"
-          hint="Require username not the nickname"
+          autocomplete="off"
+          hide-selected
+          :items="friends.available.map(x => getOtherside(x).name)"
           v-model="targetName"
         />
       </v-card-text>
@@ -23,11 +25,15 @@
 <script setup lang="ts">
 import { ref } from "vue"
 import { request } from "@/scripts/request"
-import { getAtk } from "@/stores/userinfo"
+import { getAtk, useUserinfo } from "@/stores/userinfo"
+import { useFriends } from "@/stores/friends"
 
 const props = defineProps<{ item: any }>()
 const emits = defineEmits(["close", "error", "relist"])
 
+const id = useUserinfo()
+const friends = useFriends()
+
 const loading = ref(false)
 
 const targetName = ref("")
@@ -51,4 +57,12 @@ async function inviteMember(evt: SubmitEvent) {
   }
   loading.value = false
 }
+
+function getOtherside(item: any) {
+  if (item.account_id === id.userinfo.data?.id) {
+    return item.related
+  } else {
+    return item.account
+  }
+}
 </script>