I have an input field with a function that filters a list each time a key is pressed, and outputs the results of the filtered list in the browser.
On desktop it works great, however the list only gets displayed on Android mobiles after pressing space or the enter key. To make it stranger, after pressing space or the "enter" arrow on the Android keyboard, the list behaves like it should; filtering and displaying the list as you type. Is there a way to get the behavior I am looking for? I have tried @keydown, @keyup and @keypress.
Input field with v-model
<input
v-model="searchValue"
type="text"
@input="filterStories"
/>
Filter Function and Data Properties
data() {
return {
searchValue: '',
filteredStories: []
}
},
methods: {
filterStories() {
if (this.stories.length) {
let filtered = this.stories.filter(
(story) =>
story.name.toLowerCase().includes(this.searchValue.toLowerCase())
)
if (!this.searchValue) {
this.filteredStories = []
} else {
this.filteredStories = filtered
}
}
}
Output list in browser
<li
v-for="(story, i) in filteredStories"
v-else-if="
stories.length && filteredStories.length && searchValue
"
:key="i"
>
<NuxtLink
:to="'/' + story.full_slug"
>
{{ story.name }}
</NuxtLink>
</li>
I hope this provides enough information. Thank you!
Reference to vuejs docs:
For languages that require an IME (Chinese, Japanese, Korean, etc.), you’ll notice that v-model doesn’t get updated during IME composition. If you want to cater to these updates as well, use the input event instead.
Maybe it's because the type of your keyboard. But if it does not work in all keyboard, try using value and @input instead of v-model:
<input
:value="searchValue"
type="text"
@input="filterStories"
/>
And in filterStory method:
filterStories(e) {
this.searchValue = e.target.value
if (this.stories.length) {
let filtered = this.stories.filter(
(story) =>
story.name.toLowerCase().includes(this.searchValue.toLowerCase())
)
if (!this.searchValue) {
this.filteredStories = []
} else {
this.filteredStories = filtered
}
}
}