Last active
August 7, 2016 11:12
-
-
Save Spacha/a34adaa47d4eee03c6330e157ba0f101 to your computer and use it in GitHub Desktop.
In-page Search (JS)
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!-- | |
| IN-PAGE-SEARCH (Metabolix) | |
| --> | |
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <title>In-page Search</title> | |
| <script> | |
| // List of searcable lines (could be database rows etc.) | |
| var db = [ | |
| "Car, Volvo, BMW, Toyota", | |
| "Animal, horse, dog, cat", | |
| "Name, John, Matt, Elisabeth, Maria", | |
| "Colour, blue, yellow, red, green", | |
| "Language, PHP, JavaScript, Css, Html"]; | |
| </script> | |
| </head> | |
| <body> | |
| <form action="#" onsubmit="printResult(this); return false;"> | |
| <input type="search" name="search" placeholder="Search..."/> | |
| <button type="submit">Search</button> | |
| </form> | |
| <pre id="result"></pre> | |
| <script> | |
| /** | |
| * Checks if @neelde is part of any line in db | |
| * if so, add the whole line to results array | |
| * @return {array} results | |
| */ | |
| function search(needle) { | |
| var result = []; | |
| for(var i = 0; i < db.length; i++) { | |
| if (db[i].indexOf(needle) >= 0) { | |
| result.push(db[i]); | |
| } | |
| } | |
| return result; | |
| } | |
| /** | |
| * Takes care of printing out the result which search() function returns | |
| * @form {object} form element where the search were performed | |
| * @return {string} result | |
| */ | |
| function printResult(form){ | |
| document.getElementById("result").textContent = search(form.search.value).join("\n\r"); | |
| } | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment