typeahead vue 3

gistfile1.txt

<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>