https://github.com/devforth/vue-suggestion-input
Text input with Tab-to-complete suggestions in a Github Copilot style (dimmed out text).
https://github.com/devforth/vue-suggestion-input
Last synced: 4 months ago
JSON representation
Text input with Tab-to-complete suggestions in a Github Copilot style (dimmed out text).
- Host: GitHub
- URL: https://github.com/devforth/vue-suggestion-input
- Owner: devforth
- License: mit
- Created: 2024-07-31T08:28:04.000Z (11 months ago)
- Default Branch: main
- Last Pushed: 2024-08-15T09:47:25.000Z (10 months ago)
- Last Synced: 2025-02-09T12:05:20.693Z (4 months ago)
- Language: Vue
- Size: 166 KB
- Stars: 7
- Watchers: 1
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: Changelog.md
- License: LICENSE
Awesome Lists containing this project
README
# 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](https://adminforth.dev/docs/tutorial/Advanced/plugin-development/)):
Example:
```html
```
* Classes in example above defined by tailwind CSS framework.
Script:
```javascript
import SuggestionInput from 'vue-suggestion-input'
import 'vue-suggestion-input/dist/style.css';
const currentValue = ref('');
async function complete(textBeforeCursor: string): Promise {
console.log('✋ complete request', textBeforeCursor);
// simulate delay
await new Promise((resolve) => setTimeout(resolve, 400));
// generate N random words of M length
const numOfWords = Math.floor(Math.random() * 7) + 1;
const words = Array.from({ length: numOfWords }, () => Math.random().toString(36).substring(2, 15));
// if textBeforeCursor has "br" in end - insert \n in random word at random place
if (textBeforeCursor.endsWith('br')) {
const randomWordIndex = Math.floor(Math.random() * words.length);
const pos = Math.floor(Math.random() * words[randomWordIndex].length);
words[randomWordIndex] = words[randomWordIndex].substring(0, pos) + '\n' + words[randomWordIndex].substring(pos);
}
return words.map((word) => `${word} `);
}
```
## 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.