<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" name="viewport" content="width=device-width, initial-scale=1"/> <link rel="stylesheet" type="text/css" href="css/bootstrap.css"/> <style> ul li:hover{ cursor:pointer; background-color:#eee; } </style> </head> <body> <nav class="navbar navbar-default"> <div class="container-fluid"> </div> </nav> <div class="col-md-6 well"> <hr style="border-top:1px dotted #ccc;"/> <div class="col-md-8"> <div class="form-inline"> <input type="text" id="search" placeholder="Search here..." class="form-control"/> </div> <br /> </div> </div> </body> </html>
var movie_list = ['Capptain America', 'Ant-Man', 'Doctor Strange', 'Thor: Ragnarok', 'Deadpool', 'Black Panther', 'Iron Man 3', 'Captain Marvel']; function select(index){ alert("You Select: "+movie_list[index]); } function search(){ var search = document.getElementById('search').value.toLowerCase(); var target = document.getElementById("list"); var list = target.getElementsByTagName('li'); for(var i=0; i < list.length; i++){ var text = list[i].innerHTML; if(text.toLowerCase().indexOf(search) > -1){ list[i].style.display = ""; }else{ list[i].style.display = "none"; } } } function displayList(){ movie_list.sort(function(a,b){ if(a < b){ return -1; } if(a > b){ return 1; } return 0; }); data = ""; for(var i=0; i < movie_list.length; i++){ data += "<li class='list-group-item' onclick='select("+i+");'>"+movie_list[i]+"</li>"; } document.getElementById('list').innerHTML = data; } displayList();