wip

src/client/components/autocomplete.vue

@@ -35,6 +35,7 @@ import { twemojiSvgBase } from '../../misc/twemoji-base';
 import { getStaticImageUrl } from '@/scripts/get-static-image-url';
 import MkUserSelect from './user-select.vue';
 import { acct } from '../filters/user';
+import * as os from '@/os';
 
 type EmojiDef = {
 	emoji: string;
@@ -74,7 +75,6 @@ for (const x of lib) {
 }
 
 emjdb.sort((a, b) => a.name.length - b.name.length);
-import * as os from '@/os';
 
 export default defineComponent({
 	props: {

src/client/components/reaction-picker.vue

@@ -3,7 +3,7 @@
 	<div class="buttons" ref="buttons" :class="{ showFocus }">
 		<button class="_button" v-for="(reaction, i) in rs" :key="reaction" @click="react(reaction)" :tabindex="i + 1" :title="reaction" v-particle><x-reaction-icon :reaction="reaction"/></button>
 	</div>
-	<input class="text" v-model.trim="text" :placeholder="$t('enterEmoji')" @keyup.enter="reactText" @input="tryReactText" v-autocomplete="{ model: 'text' }">
+	<input class="text" ref="text" v-model.trim="text" :placeholder="$t('enterEmoji')" @keyup.enter="reactText" @input="tryReactText">
 </div>
 </template>
 
@@ -12,6 +12,7 @@ import { defineComponent } from 'vue';
 import { emojiRegex } from '../../misc/emoji-regex';
 import XReactionIcon from './reaction-icon.vue';
 import * as os from '@/os';
+import { Autocomplete } from '@/scripts/autocomplete';
 
 export default defineComponent({
 	components: {
@@ -69,6 +70,8 @@ export default defineComponent({
 
 	mounted() {
 		this.focus = 0;
+
+		new Autocomplete(this.$refs.text, this, { model: 'text' });
 	},
 
 	methods: {

src/client/default.vue

@@ -16,7 +16,7 @@
 			</template>
 			<div class="search">
 				<fa :icon="faSearch"/>
-				<input type="search" :placeholder="$t('search')" v-model="searchQuery" v-autocomplete="{ model: 'searchQuery' }" :disabled="searchWait" @keypress="searchKeypress"/>
+				<input type="search" ref="search" :placeholder="$t('search')" v-model="searchQuery" :disabled="searchWait" @keypress="searchKeypress"/>
 			</div>
 			<button v-if="$store.getters.isSignedIn" class="post _buttonPrimary" @click="post()"><fa :icon="faPencilAlt"/></button>
 			<x-clock v-if="isDesktop" class="clock"/>
@@ -95,6 +95,7 @@ import { search } from '@/scripts/search';
 import { StickySidebar } from '@/scripts/sticky-sidebar';
 import { widgets } from './widgets';
 import XSidebar from '@/components/sidebar.vue';
+import { Autocomplete } from '@/scripts/autocomplete';
 import * as os from './os';
 
 const DESKTOP_THRESHOLD = 1100;
@@ -240,6 +241,8 @@ export default defineComponent({
 		// widget follow
 		this.attachSticky();
 
+		new Autocomplete(this.$refs.search, this, { model: 'searchQuery' });
+
 		this.$nextTick(() => {
 			this.calcHeaderWidth();
 		});

src/client/pages/messaging/messaging-room.form.vue

@@ -9,7 +9,6 @@
 		@keypress="onKeypress"
 		@paste="onPaste"
 		:placeholder="$t('inputMessageHere')"
-		v-autocomplete="{ model: 'text' }"
 	></textarea>
 	<div class="file" @click="file = null" v-if="file">{{ file.name }}</div>
 	<x-uploader ref="uploader" @uploaded="onUploaded"/>
@@ -30,6 +29,7 @@ import * as autosize from 'autosize';
 import { formatTimeString } from '../../../misc/format-time-string';
 import { selectFile } from '@/scripts/select-file';
 import * as os from '@/os';
+import { Autocomplete } from '@/scripts/autocomplete';
 
 export default defineComponent({
 	components: {
@@ -79,6 +79,8 @@ export default defineComponent({
 	mounted() {
 		autosize(this.$refs.text);
 
+		new Autocomplete(this.$refs.text, this, { model: 'text' });
+
 		// 書きかけの投稿を復元
 		const draft = JSON.parse(localStorage.getItem('message_drafts') || '{}')[this.draftKey];
 		if (draft) {