DEV Community 👩‍💻👨‍💻

Mohsen Fallahnejad
Mohsen Fallahnejad

Posted on

filtered list for live search

Sometimes we need to sort a list of different items (names or ….) Specifically and displayed to us.
For example, suppose we have a list of countries and we want to update the displayed list by entering each character to get wich name that we want it.

alt text

The following code snippet can allow us to do this
By filling the main list with the help of the filter method, it only fills the content that includes the characters entered in the search field.

alt text

if you want to use it in Vue.js, you can put this method in computed property
also you can use .includes() method instead of .startsWith() for other purposes.

If you found it useful, you can follow me and also visit my website, because there are more ways to connect with me. I hope this would help you to improve your coding skills. Thank you for your attention.


This article was originally published on The Dev.to on May 12, 2020 and was written by Mohsen Fallahnejad.

Top comments (0)

Must read for JS devs:

"I made 10x faster JSON.stringify() functions, even type safe"