Resolve #4732

src/client/app/common/views/components/settings/api.vue

@@ -14,7 +14,7 @@
 
 	<section>
 		<header><fa icon="terminal"/> {{ $t('console.title') }}</header>
-		<ui-input v-model="endpoint">
+		<ui-input v-model="endpoint" :datalist="endpoints">
 			<span>{{ $t('console.endpoint') }}</span>
 		</ui-input>
 		<ui-textarea v-model="body">
@@ -39,15 +39,23 @@ import * as JSON5 from 'json5';
 
 export default Vue.extend({
 	i18n: i18n('common/views/components/api-settings.vue'),
+
 	data() {
 		return {
 			endpoint: '',
 			body: '{}',
 			res: null,
-			sending: false
+			sending: false,
+			endpoints: []
 		};
 	},
 
+	created() {
+		this.$root.api('endpoints').then(endpoints => {
+			this.endpoints = endpoints;
+		});
+	},
+
 	methods: {
 		regenerateToken() {
 			this.$root.dialog({

src/client/app/common/views/components/ui/input.vue

@@ -23,6 +23,7 @@
 				@focus="focused = true"
 				@blur="focused = false"
 				@keydown="$emit('keydown', $event)"
+				:list="id"
 			>
 			<input v-else ref="input"
 				:type="type"
@@ -37,7 +38,11 @@
 				@focus="focused = true"
 				@blur="focused = false"
 				@keydown="$emit('keydown', $event)"
+				:list="id"
 			>
+			<datalist :id="id" v-if="datalist">
+				<option v-for="data in datalist" :value="data"/>
+			</datalist>
 		</template>
 		<template v-else>
 			<input ref="input"
@@ -130,6 +135,10 @@ export default Vue.extend({
 			required: false,
 			default: false
 		},
+		datalist: {
+			type: Array,
+			required: false,
+		},
 		inline: {
 			type: Boolean,
 			required: false,
@@ -147,7 +156,8 @@ export default Vue.extend({
 		return {
 			v: this.value,
 			focused: false,
-			passwordStrength: ''
+			passwordStrength: '',
+			id: Math.random().toString()
 		};
 	},
 	computed: {

src/server/api/endpoints/endpoints.ts

+import define from '../define';
+import endpoints from '../endpoints';
+
+export const meta = {
+	requireCredential: false,
+
+	tags: ['meta'],
+
+	params: {
+	},
+};
+
+export default define(meta, async () => {
+	return endpoints.map(x => x.name);
+});