- 1

how to search the user input string from collection of objects in js or vuejs?

i have a collection of object which include name properties. according to user input how to search that input with object?

js vuejs

3rd Aug 2017, 5:26 PM

Deepak Aryal

2 Answers

- 2

try above code once bro☝☝☝

4th Aug 2017, 1:55 AM

Sudarshan Rai

- 2

<!DOCTYPE html> <html> <head> <style> #myInput { background-image: url('/img/search.png'); background-position: 10px 12px; background-repeat: no-repeat; box-sizing: border-box; width: 100%; font-size: 16px; padding: 12px 20px 12px 40px; border: 1px solid #ddd; margin-bottom: 12px; } #myUL { list-style-type: none; padding: 0; margin: 0; } #myUL li a { border: 1px solid #ddd; margin-top: -1px; background-color: #f6f6f6; padding: 12px; text-decoration: none; font-size: 18px; color: black; display: block } #myUL li a.header { background-color: #e2e2e2; cursor: default; } #myUL li a:hover:not(.header) { background-color: #eee; } </style> </head> <body> <h2>ANIMALS</h2> <input type="text" id="myInput" onkeyup="myFunction()" placeholder= "Search Here.."title="Type in a name"> <ul id="myUL"> <li><a href="#" class="header">A</a></li> <li><a href="#">Alligator</a></li> <li><a href="#">Albatross</a></li> <li><a href="#">Antelope</a></li> <li><a href="#" class="header">B</a></li> <li><a href="#">Baboon</a></li> <li><a href="#">Blue Whale</a></li> <li><a href="#" class="header">C</a></li> <li><a href="#">Cheetah</a></li> <li><a href="#">Chimpanzee</a></li> <li><a href="#">Camel</a></li> </ul> <script> /* Declare variables */ function myFunction() { var input, filter, ul, li, a, i; input=document.getElementById("myInput"); filter = input.value.toUpperCase(); ul = document.getElementById("myUL"); li = ul.getElementsByTagName("li"); /* Loop through all list items, and hide those who don't match the search query */ for (i = 0; i < li.length; i++) { a = li[i].getElementsByTagName("a")[0]; if (a.innerHTML.toUpperCase() .indexOf(filter) > -1) { li[i].style.display = ""; } else { li[i].style.display = "none"; } } } </script> </body> </html>

4th Aug 2017, 1:55 AM

Sudarshan Rai