<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="app">
<label>Search states</label>
<input type="text" @keyup="debounce($event.target.value, 250)">
<ul>
<li v-for="state of statesFiltered">
{{state}}
</li>
</ul>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app = new Vue({
el: '#app',
methods: {
debounce(search, debounceDuration = 300){
if(this.timeoutId !== null)
{
clearTimeout(this.timeoutId);
}
this.timeoutId = setTimeout( _ => {
this.setFilteredStates(search);
}, debounceDuration);
},
setFilteredStates(searchValue){
let temp = [];
if(searchValue === "")
{
temp = this.states;
}
else
{
for(let state of this.states)
{
if(state.toLowerCase().indexOf(searchValue) !== -1)
{
temp.push(state);
}
}
}
this.statesFiltered = temp;
this.timeoutId = null;
}
},
computed: {
},
mounted(){
this.statesFiltered = this.states;
},
data: {
stateSearch: "",
timeoutId: null,
statesFiltered: [],
states: [
"Alabama",
"Alaska",
"American Samoa",
"Arizona",
"Arkansas",
"California",
"Colorado",
"Connecticut",
"Delaware",
"District Of Columbia",
"Federated States Of Micronesia",
"Florida",
"Georgia",
"Guam",
"Hawaii",
"Idaho",
"Illinois",
"Indiana",
"Iowa",
"Kansas",
"Kentucky",
"Louisiana",
"Maine",
"Marshall Islands",
"Maryland",
"Massachusetts",
"Michigan",
"Minnesota",
"Mississippi",
"Missouri",
"Montana",
"Nebraska",
"Nevada",
"New Hampshire",
"New Jersey",
"New Mexico",
"New York",
"North Carolina",
"North Dakota",
"Northern Mariana Islands",
"Ohio",
"Oklahoma",
"Oregon",
"Palau",
"Pennsylvania",
"Puerto Rico",
"Rhode Island",
"South Carolina",
"South Dakota",
"Tennessee",
"Texas",
"Utah",
"Vermont",
"Virgin Islands",
"Virginia",
"Washington",
"West Virginia",
"Wisconsin",
"Wyoming"
]
}
})
</script>
</html>
External CSS
This Pen doesn't use any external CSS resources.
External JavaScript
This Pen doesn't use any external JavaScript resources.