Vue 3 select option with search filter

!1
!2
!3
!4

Feature

Using this package, you can display an array of object on select option list, select a specific object and render its display name.

Props ----- _v-model_, _data_ and _displayName_ are REQUIRED

placeHolder - Default title is Select Item, Pass a string you prefer to display initially, such as 'Select company', 'Select user', etc, than after you select an item, selected item's display name will be displayed.

width - By default width is inherited but if you wat to give a specific, just pass a number you like. Note - measurement will be in PX - pixels.

maxHeight - By default maximum height will be 250px, but if you wat to give a specific, just pass a number you like. Note - measurement will be in PX - pixels.

inputOutlineColor - By default the input outline colour when focused will be the shades of green, but if you want it to look different just pass _color name_, _hex code_ or _rgba value_ of your choice on string like inputOutlineColor="'_red_'".

inputBorderColor - By default the input border colour will be gray, but if you want it to look different just pass _color name_, _hex code_ or _rgba value_ of your choice on string like inputBorderColor="'_yellow_'".

selected - If you want to pass a default value to render initially, you can pass an object to _selected_ prop like

data - To render your items on a list, just pass array of objects, Note: only pass array of objects.

v-model - Pass a variable to store a selected object. For example, if you may want to store
selected object or item on a variable like this const selectedItem = ref({}) or const selectedItem = reactive({}), just pass selectedItem to v-model like v-model="selectedItem"

displayName - Pass a prop as string to displayName for example displayName="'name'", in this case name should be a field inside a object you passed on data array, like as
data = [{id: 1, name: abc, age: 50}, {id: 2, name: def, age: 25}], So now on this object, except for _id_, _name_ and _age_, if you mis-spell or pass a string which is not a key(field) of an object on array, the package will not render anything on option list.

$3

- ## You should globally import this package and it's style on main.js, also you should use it on App, like

``vue

import SelectOption from 'vue3-select-option-search'
import "vue3-select-option-search/dist/style.css"

createApp(App).use(SelectOption).mount('#app')

`

- ## Alternatively

`vue

import SelectOption from 'vue3-select-option-search'
import "vue3-select-option-search/dist/style.css"

const app = createApp(App);

app.use(SelectOption);

app.mount('#app')

`

`vue


``