Skip to main content

Auto Search Using JavaScript

Screenshot
Body

In this code we will tackle about Auto Search using JavaScript. The program will enable to automatically search a row data. You are free to modify, and use this code. To learn more about this, just follow the steps below.

Getting started:

First you have to download bootstrap framework, this is the link for the bootstrap that I used for the layout design https://getbootstrap.com/.

The Main Interface

This code contains the interface of the application. To create this just write these block of code inside the text editor and save this as index.html.

  1. <br />
  2. <!DOCTYPE html><br />
  3. <html lang="en"><br />
  4. <head><br />
  5. <meta charset="UTF-8" name="viewport" content="width=device-width, initial-scale=1"/><br />
  6. <link rel="stylesheet" type="text/css" href="css/bootstrap.css"/><br />
  7. </head><br />
  8. <body><br />
  9. <nav class="navbar navbar-default"><br />
  10. <div class="container-fluid"><br />
  11. <a class="navbar-brand" href="https://sourcecodester.com">Sourcecodester</a><br />
  12. </div><br />
  13. </nav><br />
  14. <div class="col-md-3"></div><br />
  15. <div class="col-md-6 well"><br />
  16. <h3 class="text-primary">Auto Search Using JavaScript</h3><br />
  17. <hr style="border-top:1px dotted #ccc;"/><br />
  18. <div class="col-md-4"><br />
  19. <div class="form-group"><br />
  20. <label>Enter a name</label><br />
  21. <div class="input-group"><br />
  22. <div class="input-group-addon"><span class="glyphicon glyphicon-search"></span></div><br />
  23. <input type="text" id="search" placeholder="Search here..." onkeyup="autoSearch()" class="form-control"/><br />
  24. </div><br />
  25. </div><br />
  26. </div></p>
  27. <p> <table class="table table-bordered"><br />
  28. <thead class="alert-info"><br />
  29. <tr><br />
  30. <th>Member List</th><br />
  31. </tr><br />
  32. </thead><br />
  33. <tbody id="result"></tbody><br />
  34. </table><br />
  35. <ul class="list-group" id="list"></ul></p>
  36. <p> </div><br />
  37. <script src="js/script.js"></script><br />
  38. </body><br />
  39. </html><br />

Creating the Script

This code contains the script of the application. The code will automatically search a specific keyword. To do this just copy and write these block of codes inside the text editor, then save it as script.js inside the js folder.

  1. <br />
  2. var members = ['Tony Stark', 'Jin Mori', 'Luke Cage'];</p>
  3. <p>displayMember();</p>
  4. <p>function displayMember(){<br />
  5. members.sort(function(a,b){<br />
  6. if(a < b){<br />
  7. return -1;<br />
  8. }</p>
  9. <p> if(a > b){<br />
  10. return 1;<br />
  11. }</p>
  12. <p> return 0;<br />
  13. });</p>
  14. <p> data = "";</p>
  15. <p> for(var i=0; i < members.length; i++){<br />
  16. data += "<tr><td>"+members[i]+"</td></tr>";<br />
  17. }</p>
  18. <p> document.getElementById('result').innerHTML = data;<br />
  19. }</p>
  20. <p>function autoSearch(){<br />
  21. var search=document.getElementById('search').value.toLowerCase();<br />
  22. var parent=document.getElementById("result");<br />
  23. var children=parent.getElementsByTagName('tr');</p>
  24. <p> for(var i=0; i<children.length; i++){<br />
  25. var keyword=children[i].innerText;<br />
  26. if(keyword.toLowerCase().indexOf(search)>-1){<br />
  27. children[i].style.display="";<br />
  28. }else{<br />
  29. children[i].style.display = "none";<br />
  30. }<br />
  31. }</p>
  32. <p>}</p>
  33. <p>

There you have it we successfully created a Auto Search using JavaScript. I hope that this simple tutorial help you to what you are looking for. For more updates and tutorials just kindly visit this site. Enjoy Coding!

Add new comment