Created
October 3, 2021 20:48
-
-
Save tuckbloor/425cc04229ad7545b4adcb47095505f8 to your computer and use it in GitHub Desktop.
typeahead vue 3
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<template> | |
<input v-model="county" @input="filterCounty()"> | |
<ul> | |
<li v-for="result in results" :key="result"> | |
{{ result.replace(/(?:^|\s)\S/g, function(letter) { return letter.toUpperCase() }) }} | |
</li> | |
</ul> | |
</template> | |
<script> | |
import { ref } from 'vue'; | |
export default { | |
name: "type", | |
setup() { | |
const county = ref(''); | |
const results = ref([]); | |
const counties = 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' | |
]); | |
//map all of the counties to lowecase | |
const lowercased = ref(counties.value.map(county => county.toLowerCase())); | |
function filterCounty() { | |
results.value = lowercased.value.filter(inp => inp.includes(county.value.toLowerCase())); | |
} | |
return { county, counties, filterCounty , results, lowercased} | |
} | |
}; | |
</script> | |
<style scoped> | |
input { | |
border: solid 1px black; | |
} | |
</style> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment