Search Bar in pure Js
How do I make an search bar in pure js?
What is a search bar in pure js? How do you make a search bar in pure js? This script and codes were developed by Delano on 19 October 2022, Wednesday.
Search Bar in pure Js - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Search Bar in pure Js</title>
</head>
<body> <body> <div class="page"> <div class="page-header cf"> <h2>Students</h2> </div> <ul class="student-list"> <li class="student-item cf"> <div class="student-details"> <img class="avatar" src="https://randomuser.me/api/portraits/thumb/women/67.jpg"> <h3>iboya vat</h3> <span class="email">[email protected]</span> </div> <div class="joined-details"> <span class="date">Joined 07/15/15</span> </div> </li> <li class="student-item cf"> <div class="student-details"> <img class="avatar" src="https://randomuser.me/api/portraits/thumb/men/75.jpg"> <h3>aapo niskanen</h3> <span class="email">[email protected]</span> </div> <div class="joined-details"> <span class="date">Joined 06/15/12</span> </div> </li> <li class="student-item cf"> <div class="student-details"> <img class="avatar" src="https://randomuser.me/api/portraits/thumb/men/34.jpg"> <h3>phillip cox</h3> <span class="email">[email protected]</span> </div> <div class="joined-details"> <span class="date">Joined 09/11/14</span> </div> </li> <li class="student-item cf"> <div class="student-details"> <img class="avatar" src="https://randomuser.me/api/portraits/thumb/women/38.jpg"> <h3>zilda moreira</h3> <span class="email">[email protected]</span> </div> <div class="joined-details"> <span class="date">Joined 07/15/15</span> </div> </li> <li class="student-item cf"> <div class="student-details"> <img class="avatar" src="https://randomuser.me/api/portraits/thumb/women/23.jpg"> <h3>lilou le gall</h3> <span class="email">lilou.le [email protected]</span> </div> <div class="joined-details"> <span class="date">Joined 06/16/13</span> </div> </li> <li class="student-item cf"> <div class="student-details"> <img class="avatar" src="https://randomuser.me/api/portraits/thumb/women/94.jpg"> <h3>lucy hall</h3> <span class="email">[email protected]</span> </div> <div class="joined-details"> <span class="date">Joined 09/11/16</span> </div> </li> <li class="student-item cf"> <div class="student-details"> <img class="avatar" src="https://randomuser.me/api/portraits/thumb/women/24.jpg"> <h3>mark colin</h3> <span class="email">[email protected]</span> </div> <div class="joined-details"> <span class="date">Joined 01/14/14</span> </div> </li> <li class="student-item cf"> <div class="student-details"> <img class="avatar" src="https://randomuser.me/api/portraits/thumb/women/14.jpg"> <h3>sara alves</h3> <span class="email">[email protected]</span> </div> <div class="joined-details"> <span class="date">Joined 07/19/16</span> </div> </li> <li class="student-item cf"> <div class="student-details"> <img class="avatar" src="https://randomuser.me/api/portraits/thumb/men/49.jpg"> <h3>ramon macrae</h3> <span class="email">[email protected]</span> </div> <div class="joined-details"> <span class="date">Joined 05/13/12</span> </div> </li> <li class="student-item cf"> <div class="student-details"> <img class="avatar" src="https://randomuser.me/api/portraits/thumb/men/15.jpg"> <h3>connor taylor</h3> <span class="email">[email protected]</span> </div> <div class="joined-details"> <span class="date">Joined 05/18/14</span> </div> </li> <li class="student-item cf"> <div class="student-details"> <img class="avatar" src="https://randomuser.me/api/portraits/thumb/men/11.jpg"> <h3>aymeric morel</h3> <span class="email">[email protected]</span> </div> <div class="joined-details"> <span class="date">Joined 06/13/13</span> </div> </li> <li class="student-item cf"> <div class="student-details"> <img class="avatar" src="https://randomuser.me/api/portraits/thumb/men/49.jpg"> <h3>lorenz otto</h3> <span class="email">[email protected]</span> </div> <div class="joined-details"> <span class="date">Joined 05/11/14</span> </div> </li> <li class="student-item cf"> <div class="student-details"> <img class="avatar" src="https://randomuser.me/api/portraits/thumb/men/29.jpg"> <h3>karl williamson</h3> <span class="email">[email protected]</span> </div> <div class="joined-details"> <span class="date">Joined 01/12/14</span> </div> </li> <li class="student-item cf"> <div class="student-details"> <img class="avatar" src="https://randomuser.me/api/portraits/thumb/men/34.jpg"> <h3>ouassim heering</h3> <span class="email">[email protected]</span> </div> <div class="joined-details"> <span class="date">Joined 01/18/12</span> </div> </li> <li class="student-item cf"> <div class="student-details"> <img class="avatar" src="https://randomuser.me/api/portraits/thumb/men/91.jpg"> <h3>roberto molina</h3> <span class="email">[email protected]</span> </div> <div class="joined-details"> <span class="date">Joined 06/13/15</span> </div> </li> <li class="student-item cf"> <div class="student-details"> <img class="avatar" src="https://randomuser.me/api/portraits/thumb/men/28.jpg"> <h3>jordan hubert</h3> <span class="email">[email protected]</span> </div> <div class="joined-details"> <span class="date">Joined 06/13/15</span> </div> </li> <li class="student-item cf"> <div class="student-details"> <img class="avatar" src="https://randomuser.me/api/portraits/thumb/men/29.jpg"> <h3>melvin baker</h3> <span class="email">[email protected]</span> </div> <div class="joined-details"> <span class="date">Joined 09/18/14</span> </div> </li> <li class="student-item cf"> <div class="student-details"> <img class="avatar" src="https://randomuser.me/api/portraits/thumb/men/26.jpg"> <h3>everett gordon</h3> <span class="email">[email protected]</span> </div> <div class="joined-details"> <span class="date">Joined 06/17/15</span> </div> </li> <li class="student-item cf"> <div class="student-details"> <img class="avatar" src="https://randomuser.me/api/portraits/thumb/men/82.jpg"> <h3>aiden ma</h3> <span class="email">[email protected]</span> </div> <div class="joined-details"> <span class="date">Joined 07/18/12</span> </div> </li> <li class="student-item cf"> <div class="student-details"> <img class="avatar" src="https://randomuser.me/api/portraits/thumb/men/62.jpg"> <h3>florent gerard</h3> <span class="email">[email protected]</span> </div> <div class="joined-details"> <span class="date">Joined 02/12/13</span> </div> </li> <li class="student-item cf"> <div class="student-details"> <img class="avatar" src="https://randomuser.me/api/portraits/thumb/women/96.jpg"> <h3>amber chen</h3> <span class="email">[email protected]</span> </div> <div class="joined-details"> <span class="date">Joined 07/12/12</span> </div> </li> <li class="student-item cf"> <div class="student-details"> <img class="avatar" src="https://randomuser.me/api/portraits/thumb/women/9.jpg"> <h3>alexandra davies</h3> <span class="email">[email protected]</span> </div> <div class="joined-details"> <span class="date">Joined 05/11/13</span> </div> </li> <li class="student-item cf"> <div class="student-details"> <img class="avatar" src="https://randomuser.me/api/portraits/thumb/men/57.jpg"> <h3>sergio cole</h3> <span class="email">[email protected]</span> </div> <div class="joined-details"> <span class="date">Joined 02/17/15</span> </div> </li> <li class="student-item cf"> <div class="student-details"> <img class="avatar" src="https://randomuser.me/api/portraits/thumb/men/98.jpg"> <h3>edgar dixon</h3> <span class="email">[email protected]</span> </div> <div class="joined-details"> <span class="date">Joined 06/17/11</span> </div> </li> <li class="student-item cf"> <div class="student-details"> <img class="avatar" src="https://randomuser.me/api/portraits/thumb/men/94.jpg"> <h3>kirk myers</h3> <span class="email">[email protected]</span> </div> <div class="joined-details"> <span class="date">Joined 09/17/15</span> </div> </li> <li class="student-item cf"> <div class="student-details"> <img class="avatar" src="https://randomuser.me/api/portraits/thumb/women/28.jpg"> <h3>ani hesseling</h3> <span class="email">[email protected]</span> </div> <div class="joined-details"> <span class="date">Joined 08/14/16</span> </div> </li> <li class="student-item cf"> <div class="student-details"> <img class="avatar" src="https://randomuser.me/api/portraits/thumb/women/24.jpg"> <h3>victoire bonnet</h3> <span class="email">[email protected]</span> </div> <div class="joined-details"> <span class="date">Joined 05/13/16</span> </div> </li> <li class="student-item cf"> <div class="student-details"> <img class="avatar" src="https://randomuser.me/api/portraits/thumb/men/44.jpg"> <h3>marcos morales</h3> <span class="email">[email protected]</span> </div> <div class="joined-details"> <span class="date">Joined 01/12/12</span> </div> </li> <li class="student-item cf"> <div class="student-details"> <img class="avatar" src="https://randomuser.me/api/portraits/thumb/men/75.jpg"> <h3>nils neumann</h3> <span class="email">[email protected]</span> </div> <div class="joined-details"> <span class="date">Joined 03/11/12</span> </div> </li> <li class="student-item cf"> <div class="student-details"> <img class="avatar" src="https://randomuser.me/api/portraits/thumb/women/86.jpg"> <h3>emily harrison</h3> <span class="email">[email protected]</span> </div> <div class="joined-details"> <span class="date">Joined 07/18/15</span> </div> </li> <li class="student-item cf"> <div class="student-details"> <img class="avatar" src="https://randomuser.me/api/portraits/thumb/men/41.jpg"> <h3>matthew fortin</h3> <span class="email">[email protected]</span> </div> <div class="joined-details"> <span class="date">Joined 03/18/15</span> </div> </li> <li class="student-item cf"> <div class="student-details"> <img class="avatar" src="https://randomuser.me/api/portraits/thumb/women/32.jpg"> <h3>charlotte steward</h3> <span class="email">[email protected]</span> </div> <div class="joined-details"> <span class="date">Joined 02/18/11</span> </div> </li> <li class="student-item cf"> <div class="student-details"> <img class="avatar" src="https://randomuser.me/api/portraits/thumb/men/3.jpg"> <h3>marceau rodriguez</h3> <span class="email">[email protected]</span> </div> <div class="joined-details"> <span class="date">Joined 07/13/14</span> </div> </li> <li class="student-item cf"> <div class="student-details"> <img class="avatar" src="https://randomuser.me/api/portraits/thumb/men/91.jpg"> <h3>hudson anderson</h3> <span class="email">[email protected]</span> </div> <div class="joined-details"> <span class="date">Joined 09/12/15</span> </div> </li> <li class="student-item cf"> <div class="student-details"> <img class="avatar" src="https://randomuser.me/api/portraits/thumb/men/33.jpg"> <h3>warren phillips</h3> <span class="email">[email protected]</span> </div> <div class="joined-details"> <span class="date">Joined 01/11/12</span> </div> </li> <li class="student-item cf"> <div class="student-details"> <img class="avatar" src="https://randomuser.me/api/portraits/thumb/men/41.jpg"> <h3>leo niva</h3> <span class="email">[email protected]</span> </div> <div class="joined-details"> <span class="date">Joined 09/14/15</span> </div> </li> <li class="student-item cf"> <div class="student-details"> <img class="avatar" src="https://randomuser.me/api/portraits/thumb/men/3.jpg"> <h3>hani prevoo</h3> <span class="email">[email protected]</span> </div> <div class="joined-details"> <span class="date">Joined 01/11/15</span> </div> </li> <li class="student-item cf"> <div class="student-details"> <img class="avatar" src="https://randomuser.me/api/portraits/thumb/women/79.jpg"> <h3>veronica rodriguez</h3> <span class="email">[email protected]</span> </div> <div class="joined-details"> <span class="date">Joined 07/17/12</span> </div> </li> <li class="student-item cf"> <div class="student-details"> <img class="avatar" src="https://randomuser.me/api/portraits/thumb/men/41.jpg"> <h3>ginestal das neves</h3> <span class="email">ginestal.das [email protected]</span> </div> <div class="joined-details"> <span class="date">Joined 06/19/12</span> </div> </li> <li class="student-item cf"> <div class="student-details"> <img class="avatar" src="https://randomuser.me/api/portraits/thumb/men/63.jpg"> <h3>devon barnes</h3> <span class="email">[email protected]</span> </div> <div class="joined-details"> <span class="date">Joined 09/19/14</span> </div> </li> <li class="student-item cf"> <div class="student-details"> <img class="avatar" src="https://randomuser.me/api/portraits/thumb/men/55.jpg"> <h3>brennan pierce</h3> <span class="email">[email protected]</span> </div> <div class="joined-details"> <span class="date">Joined 05/15/14</span> </div> </li> <li class="student-item cf"> <div class="student-details"> <img class="avatar" src="https://randomuser.me/api/portraits/thumb/men/35.jpg"> <h3>zachary singh</h3> <span class="email">[email protected]</span> </div> <div class="joined-details"> <span class="date">Joined 05/19/11</span> </div> </li> <li class="student-item cf"> <div class="student-details"> <img class="avatar" src="https://randomuser.me/api/portraits/thumb/men/35.jpg"> <h3>arlo harris</h3> <span class="email">[email protected]</span> </div> <div class="joined-details"> <span class="date">Joined 07/12/15</span> </div> </li> <li class="student-item cf"> <div class="student-details"> <img class="avatar" src="https://randomuser.me/api/portraits/thumb/women/60.jpg"> <h3>hannah ginnish</h3> <span class="email">[email protected]</span> </div> <div class="joined-details"> <span class="date">Joined 05/17/14</span> </div> </li> <li class="student-item cf"> <div class="student-details"> <img class="avatar" src="https://randomuser.me/api/portraits/thumb/men/95.jpg"> <h3>goos brunt</h3> <span class="email">[email protected]</span> </div> <div class="joined-details"> <span class="date">Joined 09/15/12</span> </div> </li> <li class="student-item cf"> <div class="student-details"> <img class="avatar" src="https://randomuser.me/api/portraits/thumb/men/91.jpg"> <h3>eduard riedel</h3> <span class="email">[email protected]</span> </div> <div class="joined-details"> <span class="date">Joined 06/12/15</span> </div> </li> <li class="student-item cf"> <div class="student-details"> <img class="avatar" src="https://randomuser.me/api/portraits/thumb/women/42.jpg"> <h3>geesken jekel</h3> <span class="email">[email protected]</span> </div> <div class="joined-details"> <span class="date">Joined 02/12/13</span> </div> </li> <li class="student-item cf"> <div class="student-details"> <img class="avatar" src="https://randomuser.me/api/portraits/thumb/women/54.jpg"> <h3>dolores ryan</h3> <span class="email">[email protected]</span> </div> <div class="joined-details"> <span class="date">Joined 06/17/16</span> </div> </li> <li class="student-item cf"> <div class="student-details"> <img class="avatar" src="https://randomuser.me/api/portraits/thumb/men/49.jpg"> <h3>steven rogers</h3> <span class="email">[email protected]</span> </div> <div class="joined-details"> <span class="date">Joined 01/18/11</span> </div> </li> <li class="student-item cf"> <div class="student-details"> <img class="avatar" src="https://randomuser.me/api/portraits/thumb/men/63.jpg"> <h3>virgulino silva</h3> <span class="email">[email protected]</span> </div> <div class="joined-details"> <span class="date">Joined 03/18/11</span> </div> </li> <li class="student-item cf"> <div class="student-details"> <img class="avatar" src="https://randomuser.me/api/portraits/thumb/women/11.jpg"> <h3>lucile bertrand</h3> <span class="email">[email protected]</span> </div> <div class="joined-details"> <span class="date">Joined 06/13/16</span> </div> </li> <li class="student-item cf"> <div class="student-details"> <img class="avatar" src="https://randomuser.me/api/portraits/thumb/women/10.jpg"> <h3>elsa lahti</h3> <span class="email">[email protected]</span> </div> <div class="joined-details"> <span class="date">Joined 04/15/12</span> </div> </li> <li class="student-item cf"> <div class="student-details"> <img class="avatar" src="https://randomuser.me/api/portraits/thumb/women/12.jpg"> <h3>soline leclercq</h3> <span class="email">[email protected]</span> </div> <div class="joined-details"> <span class="date">Joined 05/12/14</span> </div> </li> <li class="student-item cf"> <div class="student-details"> <img class="avatar" src="https://randomuser.me/api/portraits/thumb/men/89.jpg"> <h3>henri kruse</h3> <span class="email">[email protected]</span> </div> <div class="joined-details"> <span class="date">Joined 05/14/13</span> </div> </li> </ul> </div> </body> <script type="text/javascript" src="js/app.js"></script>
</html> <script src="js/index.js"></script>
</body>
</html>
Search Bar in pure Js - Script Codes JS Codes
var page = document.querySelector(".page");
var pageHeader = document.querySelector(".page-header");
var studentList = document.querySelector(".student-list");
var eachStudent = document.querySelector(".student-item");
var studentDetails = document.querySelector(".student-details");
//Recreate Search Element in Js
var searchBar = function createBar (searchString) { var studentSearch = document.createElement("div"); var input = document.createElement("input"); var searchButton = document.createElement("button"); input.type="text"; var txtNode = document.createTextNode("Search"); if ( typeof txtNode == "object" ) { searchButton.appendChild(txtNode); } studentSearch.setAttribute("class", "student-search"); input.setAttribute("id", "inputSearch"); //append these elements to the page studentSearch.appendChild(input); studentSearch.appendChild(searchButton); input.placeholder = "Type name here.."; return studentSearch;
}
var searchFunction = function searchFeature (searchString) { console.log("Is my search feature working?"); //Get the value entered in the search box var inputString = document.getElementById('inputSearch'); var stringValue = inputString.value; //Onkeyup we want to filter the content by the string entered in the search box stringValue.onkeyup = function () { //toUpperCase to make it case insensitive var filter = stringValue.toUpperCase(); //loop through all the lis for (var i = 0; i < eachStudent.length; i++) { //Do this for all the elements (h3, email, joined-details, date) var name = eachStudent[i].getElementsByClassName('student-details')[1].innerHTML; //display all the results where indexOf() does not return -1 if (name.toUpperCase().indexOf(filter) == 0) eachStudent[i].style.display = 'list-item'; else eachStudent[i].style.display = 'none'; } }
}
function addElements () { console.log('Add search bar, trying to anyway...') pageHeader.appendChild(searchBar()); page.appendChild(paginationFilter()); onLoad();
}
window.onload = addElements;
window.onLoad = searchFunction;
Developer | Delano |
Username | Delano83 |
Uploaded | October 19, 2022 |
Rating | 3 |
Size | 3,750 Kb |
Views | 16,192 |
Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!
Name | Size |
A Pen by Delano | 4,300 Kb |
Label Estes With Corrections | 0 Kb |
ConfirmationEmailOriginal | 4,228 Kb |
Label for Estes | 2,661 Kb |
JerrDan Home page | 3,684 Kb |
Adform Creative Tabs | 3,000 Kb |
Bootstrap Validator on StringLength | 2,807 Kb |
Nav | 2,909 Kb |
My Adform Revised May 2017 | 5,959 Kb |
Treehouse Full Stack Javascript | 6,450 Kb |
Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!
Name | Username | Size |
Angular Sandbox | Alexgurrola | 1,616 Kb |
React Template | Isac | 1,241 Kb |
Sticky footer testing | 75th | 1,649 Kb |
Ocean | Gordonnl | 2,817 Kb |
SlideupBoxes | Gavra | 23,772 Kb |
Break Out | AzazelN28 | 12,431 Kb |
Draggable directive | YahyaKacem | 2,277 Kb |
Wavy Road with Dashes | Jonobr1 | 2,679 Kb |
A Pen by tugce | Ecgutcnkr | 4,197 Kb |
Mandelbrot Fractal | _Billy_Brown | 2,706 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!