1
+ < html >
2
+
3
+ < head >
4
+ < title >
5
+ Go Web Development
6
+ </ title >
7
+ < link rel ="stylesheet " href ="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css " integrity ="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T " crossorigin ="anonymous ">
8
+ < link rel ="stylesheet " href ="https://use.fontawesome.com/releases/v5.7.0/css/all.css " integrity ="sha384-lZN37f5QGtY3VHgisS14W3ExzMWZxybE1SJSEsQp9S+oqd12jhcu+A56Ebc1zFSJ " crossorigin ="anonymous ">
9
+ < script src ="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js " integrity ="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM " crossorigin ="anonymous "> </ script >
10
+ < script src ="https://code.jquery.com/jquery-3.3.1.slim.min.js " integrity ="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo " crossorigin ="anonymous "> </ script >
11
+ < script src ="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js " integrity ="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1 " crossorigin ="anonymous "> </ script >
12
+ </ head >
13
+
14
+ < body >
15
+ < nav class ="navbar navbar-dark bg-dark ">
16
+ < a class ="navbar-brand " href ="# ">
17
+ < img src ="http://i.stack.imgur.com/2mWEC.png " width ="30 " height ="30 " class ="d-inline-block align-top "
18
+ alt ="">
19
+ Go Web Development
20
+ </ a >
21
+ </ nav >
22
+ < ul class ="list-group ">
23
+ < li class ="list-group-item ">
24
+ < ul class ="list-group ">
25
+ < li class ="list-group-item ">
26
+ < form id ="search-form " class ="form-inline " onsubmit ="return false ">
27
+ < label >
28
+ < span class ="badge badge-dark mr-sm-4 ">
29
+ Search
30
+ </ span >
31
+ </ label >
32
+ < input class ="form-control mr-sm-4 " type ="search " placeholder ="Search " aria-label ="Search ">
33
+ < button class ="btn btn-success " title ="Search " type ="submit " onclick ="return submitSearch() "> < i class ="fas fa-search "> </ i > </ button >
34
+ </ form >
35
+ </ li >
36
+ < table class ="table table-hover table-bordered table-dark ">
37
+ < thead id ="table-head ">
38
+ < tr >
39
+ < th scope ="col "> Title</ th >
40
+ < th scope ="col "> Author</ th >
41
+ < th scope ="col "> Year</ th >
42
+ < th scope ="col "> Date</ th >
43
+ </ tr >
44
+ </ thead >
45
+ < tbody id ="search-results ">
46
+
47
+ </ tbody >
48
+ </ table >
49
+ </ ul >
50
+ </ li >
51
+ </ ul >
52
+ < script src ="https://code.jquery.com/jquery-3.4.1.min.js " integrity ="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo= " crossorigin ="anonymous "> </ script >
53
+ < script type ="text/javascript ">
54
+ function submitSearch ( ) {
55
+ $ . ajax ( {
56
+ url : "/search" ,
57
+ method : "POST" ,
58
+ data : $ ( "#search-form" ) . serialize ( ) ,
59
+ success : function ( rawData ) {
60
+ var parsed = JSON . parse ( rawData ) ;
61
+ if ( ! parsed ) return ;
62
+
63
+ var searchResults = $ ( "#search-results" ) ;
64
+ searchResults . empty ( ) ;
65
+
66
+ parsed . forEach ( function ( result ) {
67
+ var row = $ ( "<tr><td>" + result . Title + "</td><td>" + result . Author + "</td><td>" + result . Year + "</td><td>" + result . ID + "</td></tr>" ) ;
68
+ searchResults . append ( row ) ;
69
+ } ) ;
70
+ }
71
+ } ) ;
72
+ return false ;
73
+ }
74
+ </ script >
75
+ </ body >
76
+
77
+ </ html >
0 commit comments