Hi all, here I am with a search bar using this you can search the content of their concern. A basic search bar we can make by using Html, CSS & Javascript only. There are many advance search functionality that uses algorithm base search to show up results. But the search function that we are going to make will filter substrings in the string.
Lets code this Searchbox functionality.
HTML Code:
In this html we remind one thing we must have different data string for each recurrence so that when we search item it can differentitate for visible output.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 |
<div class="container"> <div class="search-box"> <input placeholder="Type to Search..." id="search-users" class="search-users" type="text" > <button class="search-box-action">Search</button> </div> <div class="users-container"> <div class="user"> <div class="user-img"><img src="http://css3transition.com/demo/toggle-side-menu/stylesheet/images/person-1.svg" alt="Rahul"/> </div> <div class="user-data"><h2>Rahul Yadav</h2><a href="#">(email1@example.com)</a> <div class="user-designation">Angular Developer</div> </div> <div class="user-controls"> <a class="add" href="#"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#ffffff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-plus-circle"><circle cx="12" cy="12" r="10"></circle><line x1="12" y1="8" x2="12" y2="16"></line><line x1="8" y1="12" x2="16" y2="12"></line></svg></a> <a class="delete" href="#"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#ffffff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-trash-2"><polyline points="3 6 5 6 21 6"></polyline><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path><line x1="10" y1="11" x2="10" y2="17"></line><line x1="14" y1="11" x2="14" y2="17"></line></svg></a> <a class="update" href="#"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#ffffff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-edit"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"></path><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"></path></svg></a> </div> </div> <div class="user"> <div class="user-img"><img src="http://css3transition.com/demo/toggle-side-menu/stylesheet/images/person-2.svg" alt="nelson mandela"/></div> <div class="user-data"><h2>Nelson Mandela</h2><a href="#">(nelsonmandela@example.com)</a> <div class="user-designation">Social Activist</div> </div> <div class="user-controls"> <a class="add" href="#"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#ffffff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-plus-circle"><circle cx="12" cy="12" r="10"></circle><line x1="12" y1="8" x2="12" y2="16"></line><line x1="8" y1="12" x2="16" y2="12"></line></svg></a> <a class="delete" href="#"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#ffffff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-trash-2"><polyline points="3 6 5 6 21 6"></polyline><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path><line x1="10" y1="11" x2="10" y2="17"></line><line x1="14" y1="11" x2="14" y2="17"></line></svg></a> <a class="update" href="#"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#ffffff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-edit"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"></path><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"></path></svg></a> </div> </div> <div class="user"> <div class="user-img"><img src="http://css3transition.com/demo/toggle-side-menu/stylesheet/images/person-3.svg" alt="barack obama"/> </div> <div class="user-data"><h2>Barack Obama</h2><a href="#">(barackobama@example.com)</a> <div class="user-designation">Politician</div> </div> <div class="user-controls"> <a class="add" href="#"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#ffffff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-plus-circle"><circle cx="12" cy="12" r="10"></circle><line x1="12" y1="8" x2="12" y2="16"></line><line x1="8" y1="12" x2="16" y2="12"></line></svg></a> <a class="delete" href="#"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#ffffff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-trash-2"><polyline points="3 6 5 6 21 6"></polyline><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path><line x1="10" y1="11" x2="10" y2="17"></line><line x1="14" y1="11" x2="14" y2="17"></line></svg></a> <a class="update" href="#"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#ffffff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-edit"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"></path><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"></path></svg></a> </div> </div> <div class="user"> <div class="user-img"><img src="http://css3transition.com/demo/toggle-side-menu/stylesheet/images/person-4.svg" alt="Kalpana Chawala"/> </div> <div class="user-data"><h2>Kalpana Chawala</h2><a href="#">(kalpana@example.com)</a> <div class="user-designation">Astronaut</div> </div> <div class="user-controls"> <a class="add" href="#"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#ffffff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-plus-circle"><circle cx="12" cy="12" r="10"></circle><line x1="12" y1="8" x2="12" y2="16"></line><line x1="8" y1="12" x2="16" y2="12"></line></svg></a> <a class="delete" href="#"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#ffffff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-trash-2"><polyline points="3 6 5 6 21 6"></polyline><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path><line x1="10" y1="11" x2="10" y2="17"></line><line x1="14" y1="11" x2="14" y2="17"></line></svg></a> <a class="update" href="#"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#ffffff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-edit"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"></path><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"></path></svg></a> </div> </div> <div class="user"> <div class="user-img"><img src="http://css3transition.com/demo/toggle-side-menu/stylesheet/images/person-3.svg" alt="Narendra Modi"/> </div> <div class="user-data"><h2>Narendra Modi</h2><a href="#">(modi@example.com)</a> <div class="user-designation">Prime Minister Of India</div> </div> <div class="user-controls"> <a class="add" href="#"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#ffffff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-plus-circle"><circle cx="12" cy="12" r="10"></circle><line x1="12" y1="8" x2="12" y2="16"></line><line x1="8" y1="12" x2="16" y2="12"></line></svg></a> <a class="delete" href="#"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#ffffff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-trash-2"><polyline points="3 6 5 6 21 6"></polyline><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path><line x1="10" y1="11" x2="10" y2="17"></line><line x1="14" y1="11" x2="14" y2="17"></line></svg></a> <a class="update" href="#"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#ffffff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-edit"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"></path><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"></path></svg></a> </div> </div> <div class="user"> <div class="user-img"><img src="http://css3transition.com/demo/toggle-side-menu/stylesheet/images/person-1.svg" alt="Mark Jukerburg"/> </div> <div class="user-data"><h2>Mark Jukerburg</h2><a href="#">(mark@example.com)</a> <div class="user-designation">Facebook CEO</div> </div> <div class="user-controls"> <a class="add" href="#"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#ffffff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-plus-circle"><circle cx="12" cy="12" r="10"></circle><line x1="12" y1="8" x2="12" y2="16"></line><line x1="8" y1="12" x2="16" y2="12"></line></svg></a> <a class="delete" href="#"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#ffffff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-trash-2"><polyline points="3 6 5 6 21 6"></polyline><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path><line x1="10" y1="11" x2="10" y2="17"></line><line x1="14" y1="11" x2="14" y2="17"></line></svg></a> <a class="update" href="#"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#ffffff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-edit"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"></path><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"></path></svg></a> </div> </div> <div class="user"> <div class="user-img"><img src="http://css3transition.com/demo/toggle-side-menu/stylesheet/images/person-2.svg" alt="Mukesh Ambani"/> </div> <div class="user-data"><h2>Mukesh Ambani</h2><a href="#">(mukesh@example.com)</a> <div class="user-designation">Reliance Owner</div> </div> <div class="user-controls"> <a class="add" href="#"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#ffffff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-plus-circle"><circle cx="12" cy="12" r="10"></circle><line x1="12" y1="8" x2="12" y2="16"></line><line x1="8" y1="12" x2="16" y2="12"></line></svg></a> <a class="delete" href="#"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#ffffff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-trash-2"><polyline points="3 6 5 6 21 6"></polyline><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path><line x1="10" y1="11" x2="10" y2="17"></line><line x1="14" y1="11" x2="14" y2="17"></line></svg></a> <a class="update" href="#"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#ffffff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-edit"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"></path><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"></path></svg></a> </div> </div> <div class="user"> <div class="user-img"><img src="http://css3transition.com/demo/toggle-side-menu/stylesheet/images/person-3.svg" alt="K srivan"/> </div> <div class="user-data"><h2>K srivan</h2><a href="#">(srivan@example.com)</a> <div class="user-designation">ISRO President</div> </div> <div class="user-controls"> <a class="add" href="#"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#ffffff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-plus-circle"><circle cx="12" cy="12" r="10"></circle><line x1="12" y1="8" x2="12" y2="16"></line><line x1="8" y1="12" x2="16" y2="12"></line></svg></a> <a class="delete" href="#"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#ffffff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-trash-2"><polyline points="3 6 5 6 21 6"></polyline><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path><line x1="10" y1="11" x2="10" y2="17"></line><line x1="14" y1="11" x2="14" y2="17"></line></svg></a> <a class="update" href="#"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#ffffff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-edit"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"></path><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"></path></svg></a> </div> </div> </div> </div> |
CSS Code:
Going to make this layout beautiful as be know beauty is best.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 |
html{ padding: 0; margin: 0; height: 100%; background-image: linear-gradient(to right bottom, #4800fa, #4800fb, #4900fc, #4900fd, #4900fe, #5200fc, #5900fa, #6000f8, #6d00f3, #7800ee, #8100e9, #8900e4); background-origin: border-box; background-position: top left; background-repeat: no-repeat; position: fixed; width: 100%; } body { margin: 0; font-family: sans-serif; cursor: default; } .container { width: 1280px; margin: 10vh auto 0; } .search-box{ width: 500px; max-width: 100%; margin: 0 auto; position: relative; margin-bottom: 30px; } .search-users{ width: 500px; max-width: 100%; border: none; background: #ffffff; height: 50px; border-radius: 40px; box-shadow: 5px 10px 10px rgba(0,0,0,0.1); padding: 5px 15px; box-sizing: border-box; } .search-users:focus{ border: none; outline: none; } .search-box-action{ width: 90px; background-image: linear-gradient(to right, #5200ff, #5c00ff, #6500ff, #6d00ff, #7500ff, #7a00fd, #7e00fa, #8200f8, #8400f3, #8700ee, #8800ea, #8a00e5); height: 34px; border-radius: 30px; position: absolute; right: 10px; top: 8px; border: none; font-size: 12px; color: #fff; box-sizing: border-box; } .users-container { width: 1280px; margin: 0 auto; overflow: auto; height: calc(100vh - 70px); } .user{ width: calc(25% - 24px); min-width: 240px; margin: 12px; float: left; background: linear-gradient(to right bottom, #9c05ff, #9a07fb, #9909f6, #970bf2, #950dee, #900ceb, #8c0ce9, #870be6, #7e08e5, #7606e3, #6c05e2, #6204e0); border-radius: 15px; box-shadow: 0px 5px 10px rgba(0,0,0,0.1); padding: 15px; box-sizing: border-box; transition: all 0.5s ease; } .user:hover{ box-shadow: 4px 10px 10px rgba(0,0,0,0.2); background: linear-gradient(to left top, #9c05ff, #9a07fb, #9909f6, #970bf2, #950dee, #900ceb, #8c0ce9, #870be6, #7e08e5, #7606e3, #6c05e2, #6204e0); transition: all 0.5s ease; } .user-img{ height: 80px; width: 80px; margin: 0 auto 15px; } .user-img img{ height: 80px; width: 80px; border-radius: 50px; } .user-data h2{ font-size: 15px; color: #ffffff; text-align: center; letter-spacing: 1px; margin-bottom: 5px; } .user-data a{ text-decoration: none; font-size: 12px; color: #ffffff; text-align: center; letter-spacing: 1px; margin-bottom: 5px; display: block; opacity: 0.7; } .user-data .user-designation{ display: block; text-align: center; padding: 12px; font-size: 12px; border: none; margin: 10px 0px; color: #ff8fce; letter-spacing: 2px; background: rgba(0,0,0,0.1); border-radius: 30px; } .user-controls{ text-align: center; } .user-controls a{ text-align: center; display: inline-block; width: 36px; height: 15px; border-right: 1px solid #eac6f1; box-sizing: border-box; margin-left: -5px; padding: 0; margin-top: 5px; } .user-controls a:last-child{ border-right: none; } .user-controls a svg{ width: 20px; height: 20px; margin-top: -3px; } |
Javascript code:
When we give this search bar any input on keypress id=”search-users” called, in this way our javascript code works on every keypress. First of all we get input using querySelector for input field ID and make sure you convert it in lowercase to avoid case sensivity while searching. A arrary of data stored in userData. This contains everylist that has class “user”. After this loops runs to check if innerHTML of every document includes the input substring if it does not, display set to none so that it can be hidden from front end.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
var searchUsers = document.querySelector('#search-users'), users = document.querySelectorAll('.user'), usersData = document.querySelectorAll('.user-data'), searchVal; searchUsers.addEventListener('keydown', function() { searchVal = this.value.toLowerCase(); for (var i = 0; i < users.length; i++) { if (!searchVal || usersData[i].textContent.toLowerCase().indexOf(searchVal) > -1) { users[i].style['display'] = 'inline-block'; } else { users[i].style['display'] = 'none'; } } }); |