html for the search box

edx_proctoring/static/proctoring/js/views/proctored_exam_attempt_view.js

@@ -27,9 +27,13 @@ var edx = edx || {};
         },
         events: {
             "click .remove-attempt": "onRemoveAttempt",
-            'click li > a.target-link': 'getPaginatedAttempts'
+            'click li > a.target-link': 'getPaginatedAttempts',
+            'click .search-attempts > span.search': 'searchAttempts'
             
         },
+        searchAttempts: function(event){
+            alert('search');
+        },
         getPaginatedAttempts: function(event) {
             var target = $(event.currentTarget);
             var url = target.data('target-url');

edx_proctoring/static/proctoring/templates/student-proctored-exam-attempts.underscore

@@ -51,6 +51,12 @@
             return template;
         }
     %>
+        <div class="top-header">
+            <div class='search-attempts'>
+                <input type="text" id="search_attempt_id" placeholder="e.g johndoe or john.do@gmail.com" />
+                <span class="search"><i class="fa fa-search"></i></span>
+                <span><i class="fa fa-refresh"></i></i></span>
+            </div>
             <ul class="pagination">
                 <% if (!pagination_info.has_previous){ %>
                 <li class="disabled">
@@ -114,6 +120,8 @@
                 </li>
                 <% }%>
             </ul>
+            <div class="clearfix"></div>
+        </div>
         <table class="exam-attempts-table">
             <thead>
                 <tr class="exam-attempt-headings">