44 < title > EMS Main Page</ title >
55 <!-- Use Bootstrap for styling -->
66 < link rel ="stylesheet " href ="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css ">
7+ < style >
8+ .search-container {
9+ position : fixed;
10+ top : 20px ;
11+ right : 10px ;
12+ display : flex;
13+ align-items : center;
14+ }
15+
16+ .search-container .search-icon {
17+ cursor : pointer;
18+ }
19+
20+ .search-container .search-input {
21+ display : none;
22+ margin-right : 20px ;
23+ transition : width 0.5s ease-in-out;
24+ }
25+
26+ .search-container .search-input .visible {
27+ display : block;
28+ width : 300px ;
29+ }
30+ </ style >
731 < script >
832 function updateEmployee ( ) {
933 var id = prompt ( "Enter ID:" ) ;
1943 }
2044 }
2145
46+ function toggleSearchBar ( ) {
47+ var searchBar = document . querySelector ( '.search-input' ) ;
48+ searchBar . classList . toggle ( 'visible' ) ;
49+ searchBar . focus ( ) ;
50+ }
51+
2252 function searchEmployee ( ) {
23- var id = prompt ( "Enter ID:" ) ;
24- if ( id != null ) {
25- window . location . href = "/api/search_employee/ " + id ;
53+ var search_query = document . querySelector ( '.search-input' ) . value ;
54+ if ( search_query ) {
55+ window . location . href = "/api/search_employee?search_query= " + encodeURIComponent ( search_query ) ;
2656 }
2757 }
2858 </ script >
2959</ head >
3060< body >
61+ < div class ="search-container ">
62+ < span class ="search-icon " onclick ="toggleSearchBar() ">
63+ < img src ="https://img.icons8.com/small/16/000000/search.png " alt ="Search ">
64+ </ span >
65+ < input type ="text " class ="search-input " onkeydown ="if (event.key === 'Enter') searchEmployee() " placeholder ="Search (ID, Name, Email, or Department) ">
66+ </ div >
67+
3168 <!-- Create a banner -->
3269 < div class ="jumbotron ">
3370 < h1 class ="display-4 "> Employee Management System</ h1 >
@@ -50,11 +87,6 @@ <h1 class="display-4">Employee Management System</h1>
5087 < button class ="btn btn-primary btn-block " onclick ="deleteEmployee() "> Delete</ button >
5188 </ div >
5289 </ div >
53- < div class ="row mt-3 ">
54- < div class ="col-md-3 ">
55- < button class ="btn btn-primary btn-block " onclick ="searchEmployee() "> Search</ button >
56- </ div >
57- </ div >
5890 </ div >
5991</ body >
6092</ html >
0 commit comments