Extending Vue 3 Simple Typeahead with Events and Methods

Vue 3 Simple Typeahead provides several events and methods that allow developers to handle user interactions and manipulate the component dynamically.

Key Events for User Interaction

• @selectItem: Triggered when an item is selected.
• @onInput: Fires when the user types in the input field.
• @onFocus & @onBlur: Handle focus changes for better UI control.

Using Built-in Methods

• clearInput(): Clears the input field.
• focusInput(): Focuses on the input box programmatically.
• blurInput(): Removes focus from the input box.
• getInput(): Retrieves the raw HTML input element.

Example: Handling Events and Methods with Refs

<vue3-simple-typeahead ref="typeaheadRef" :items="['Red', 'Green', 'Blue']" @selectItem="handleSelect">
</vue3-simple-typeahead>

<button @click="clearSearch">Clear Search</button>

<script setup>
import { ref } from 'vue';

const typeaheadRef = ref(null);

function clearSearch() {
  typeaheadRef.value.clearInput();
}

function handleSelect(item) {
  console.log('Selected:', item);
}
</script>

Using Vue refs, you can programmatically control the component, improving flexibility in real-world applications.