A user-friendly, fully customizable search input component inspired by Github and Storybook.
It gets focus by pressing the “/” key on the keyboard and displays a close button to quickly clear what you just typed.
How to use it:
1. Import and register the search input component.
import { ref } from 'vue'
import SearchInput from 'vue-search-input'
import 'vue-search-input/dist/styles.css'
2. Add the component to the template.
<template> <SearchInput v-model="searchVal" /> </template>
3. Available props.
type: {
type: String as PropType<FieldType>,
default: 'search',
validator: (prop: FieldType) => fieldType.includes(prop)
},
modelValue: {
type: String,
default: ''
},
wrapperClass: {
type: String,
default: 'search-input-wrapper'
},
searchIcon: defaultBoolean(),
shortcutIcon: defaultBoolean(),
clearIcon: defaultBoolean(),
hideShortcutIconOnBlur: defaultBoolean(),
clearOnEsc: defaultBoolean(),
blurOnEsc: defaultBoolean(),
selectOnFocus: defaultBoolean(),
shortcutListenerEnabled: defaultBoolean(),
shortcutKey: {
type: String as PropType<KeyboardEvent['key']>,
default: '/'
}
4. Slots.
- search-icon: <i class=”search-icon search”></i>
- shortcut-icon: <i class=”search-icon shortcut” title=’Press “/” to search’></i>
- clear-icon: <button class=”search-icon clear” aria-label=”Clear” @mousedown=”clear” @keydown.space.enter=”clear”></button>
- append: Adds an item inside the input wrapper, before the search icon
- append-inner: Adds an item inside the input wrapper, after the search icon
- prepend: Adds an item inside the input wrapper directly after the input element
- prepend-outer: Adds an item inside the input wrapper directly after the clear icon
5. Fire an event after the input value has changed.
- @update:modelValue
Preview:
Changelog:
v1.1.12 (08/14/2023)
- Bug Fixes
Download Details:
Author: kouts
Live Demo: https://vue-search-input.vercel.app/
Download Link: https://github.com/kouts/vue-search-input/archive/refs/heads/main.zip
Official Website: https://github.com/kouts/vue-search-input
Install & Download:
# NPM
$ npm i vue-search-input