add text path to autocomplete api input (#10183)

app/src/interfaces/input-autocomplete-api/index.ts

@@ -36,6 +36,19 @@ export default defineInterface({
 					placeholder: 'result.predictions',
 					font: 'monospace',
 				},
+				width: 'full',
+			},
+		},
+		{
+			field: 'textPath',
+			name: '$t:interfaces.input-autocomplete-api.text_path',
+			type: 'string',
+			meta: {
+				interface: 'input',
+				options: {
+					placeholder: 'structured_main_text',
+					font: 'monospace',
+				},
 				width: 'half',
 			},
 		},
@@ -46,7 +59,7 @@ export default defineInterface({
 			meta: {
 				interface: 'input',
 				options: {
-					placeholder: 'structured_main_text',
+					placeholder: 'structured_main_value',
 					font: 'monospace',
 				},
 				width: 'half',

app/src/interfaces/input-autocomplete-api/input-autocomplete-api.vue

@@ -20,8 +20,8 @@
 			</template>
 
 			<v-list v-if="results.length > 0">
-				<v-list-item v-for="result of results" :key="result" @click="() => emitValue(result)">
-					<v-list-item-content>{{ result }}</v-list-item-content>
+				<v-list-item v-for="result of results" :key="result.value" @click="() => emitValue(result.value)">
+					<v-list-item-content>{{ textPath ? result.text : result.value }}</v-list-item-content>
 				</v-list-item>
 			</v-list>
 		</v-menu>
@@ -49,6 +49,10 @@ export default defineComponent({
 			type: String,
 			default: null,
 		},
+		textPath: {
+			type: String,
+			default: null,
+		},
 		valuePath: {
 			type: String,
 			default: null,
@@ -86,7 +90,7 @@ export default defineComponent({
 	setup(props, { emit }) {
 		const { t } = useI18n();
 
-		const results = ref<string[]>([]);
+		const results = ref<Record<string, any>[]>([]);
 
 		const fetchResultsRaw = async (value: string | null) => {
 			if (!value) {
@@ -104,11 +108,17 @@ export default defineComponent({
 					// eslint-disable-next-line no-console
 					console.warn(`Expected results type of array, "${typeof resultsArray}" received`);
 					return;
-				} else {
-					results.value = resultsArray
-						.map((result: Record<string, unknown>) => (props.valuePath ? get(result, props.valuePath) : result))
-						.filter((val: unknown) => val);
 				}
+
+				results.value = resultsArray.map((result: Record<string, unknown>) => {
+					if (props.textPath && props.valuePath) {
+						return { text: get(result, props.textPath), value: get(result, props.valuePath) };
+					} else if (props.valuePath) {
+						return { value: get(result, props.valuePath) };
+					} else {
+						return { value: result };
+					}
+				});
 			} catch (err: any) {
 				// eslint-disable-next-line no-console
 				console.warn(err);

app/src/lang/translations/en-US.yaml

@@ -1457,6 +1457,7 @@ interfaces:
     input-autocomplete-api: Autocomplete Input (API)
     description: A search typeahead for external API values.
     results_path: Results Path
+    text_path: Text Path
     value_path: Value Path
     trigger: Trigger
     rate: Rate