tb-vue3-typeahead
v1.0.1
Published
Typeahead for Vue3
Downloads
3
Readme
Install:
npm i tb-vue3-typeahead
Example:
<template>
<Typeahead
:data='data'
:inputStyle="{
backgroundColor: 'white',
width: '460px',
height: '35px',
border: 'solid 1px black',
fontSize: '20px'
}"
placeholder="Search..."
@tb-typeahead-result="TbTypeaheadResult"
>
</Typeahead>
</template>
<script>
import Typeahead from 'tb-vue3-typeahead';
import { ref } from 'vue';
export default {
components: {
Typeahead
},
setup() {
const data = ref([
'Avon',
'Bedfordshire',
'Berkshire',
'Buckinghamshire',
'Cambridgeshire',
'Cheshire',
'City of London',
'Cleveland',
'Cornwall',
'Cumbria',
'Derbyshire',
'Devon',
'Dorset',
'Durham',
'East Sussex',
'Essex',
'Gloucestershire',
'Greater London',
'Greater Manchester',
'Hampshire',
'Herefordshire',
'Hertfordshire',
'Isle of Wight',
'Kent',
'Lancashire',
'Leicestershire',
'Lincolnshire',
'Merseyside',
'Middlesex',
'Norfolk',
'Northamptonshire',
'Northumberland',
'North Humberside',
'North Yorkshire',
'Nottinghamshire',
'Oxfordshire',
'Rutland',
'Shropshire',
'Somerset',
'South Humberside',
'South Yorkshire',
'Staffordshire',
'Suffolk',
'Surrey',
'Tyne and Wear',
'Warwickshire',
'West Midlands',
'West Sussex',
'West Yorkshire',
'Wiltshire',
'Worcestershire'
]);
function TbTypeaheadResult(result) {
console.log(result)
}
return { data, TbTypeaheadResult}
}
}
</script>
Props:
inputStyle: Style The Input Field
ulStyle: Style The ul Tag For Results
liStyle: Style The li Tags For Results