Vue suggestion input

Text input with Tab-to-complete suggestions in a Github Copilot style (dimmed out text).

• Tab to complete full suggestion
• Ctrl + Right to complete word (up to next space)
• Ctrl + Down to re-init completion

Plugin in action (with Tailwind CSS and Chat-GPT API):

Example:

1
2  <SuggestionInput 
3    class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 
4      focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400
5      dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500 whitespace-normal"
6      v-model="currentValue"
7      type="string"
8      :completionRequest="complete"
9      :debounceTime="300"
10    />
11

• Classes in example above defined by tailwind CSS framework.

Script:

1import SuggestionInput from 'vue-suggestion-input'
2import 'vue-suggestion-input/dist/style.css';
3
4const currentValue = ref('');
5
6async function complete(textBeforeCursor: string): Promise<string[]> {
7  console.log('✋ complete request', textBeforeCursor);
8
9  // simulate delay
10  await new Promise((resolve) => setTimeout(resolve, 400));
11
12  // generate N random words of M length
13  const numOfWords = Math.floor(Math.random() * 7) + 1;
14  const words = Array.from({ length: numOfWords }, () => Math.random().toString(36).substring(2, 15));
15
16  // if textBeforeCursor has "br" in end - insert \n in random word at random place
17  if (textBeforeCursor.endsWith('br')) {
18    const randomWordIndex = Math.floor(Math.random() * words.length);
19    const pos = Math.floor(Math.random() * words[randomWordIndex].length);
20    words[randomWordIndex] = words[randomWordIndex].substring(0, pos) + '\n' + words[randomWordIndex].substring(pos);
21  }
22
23  return words.map((word) => `${word} `);
24}
25

Props

debounceTime

Number of milliseconds to wait before calling completionRequest after user input.

completionRequest

Async function that returns a string to be used as completion. You can use current v-model-bound value to generate suggestions.

type

'string' or 'text'

String type does not allow user to enter new lines. Text does.