Add real-time search bar (#17)

* Add real-time search bar

- Search input above the filter section searches across conference name,
  description, venue, and location as you type
- Search and tag filters compose — both must match for an entry to show
- Clear (×) button on the search input resets the query
- Clear Filters button now also resets the search input

* Move search bar below filters; fix clear button height

* Fix search bar spacing: add top margin above search row

Author: ajithsureshtii

index.html

@@ -100,6 +100,16 @@ <h1>
             <button class="btn btn-default btn-sm sort-btn" data-sort="event-date">Event Date</button>
           </div>
 
+          <div class="col-xs-12 search-row">
+            <div class="input-group search-bar">
+              <span class="input-group-addon"><i class="fas fa-search"></i></span>
+              <input type="text" id="search-input" class="form-control" placeholder="Search by name, venue, location…" autocomplete="off">
+              <span class="input-group-btn">
+                <button id="clear-search" class="btn btn-default" type="button" title="Clear search"><i class="fas fa-times"></i></button>
+              </span>
+            </div>
+          </div>
+
         </div>
 
       </div>

static/css/styles.css

@@ -11,6 +11,45 @@ h2 .evtname {
   opacity: 0.5;
 }
 
+.search-row {
+  margin-top: 16px;
+  margin-bottom: 4px;
+}
+
+.search-bar .input-group-addon {
+  background: #fff;
+  border-right: none;
+  color: #007bff;
+  font-size: 14px;
+}
+
+.search-bar .form-control {
+  border-left: none;
+  box-shadow: none;
+  font-size: 14px;
+}
+
+.search-bar .form-control:focus {
+  border-color: #007bff;
+  box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.12);
+}
+
+.search-bar .input-group-btn .btn {
+  border-left: none;
+  color: #aaa;
+  box-shadow: none;
+  height: 34px;
+  padding-top: 6px;
+  padding-bottom: 6px;
+  font-size: 14px;
+  line-height: 1.42857;
+}
+
+.search-bar .input-group-btn .btn:hover {
+  color: #555;
+  background: #f8f9fa;
+}
+
 .sort-label {
   margin-left: 10px;
   margin-right: 5px;

static/js/main.js

@@ -246,11 +246,26 @@ $(function() {
     filter3: new Set()
   };
 
+  var searchQuery = '';
+
   function updateConfList() {
     $(".conf").each(function () {
       let conf = $(this);
       let show = true;
 
+      // Check search query against name, description, date, and place
+      if (searchQuery) {
+        let text = (
+          conf.find('.conf-title').text() + ' ' +
+          conf.find('.meta').first().text() + ' ' +
+          conf.find('.conf-date').text() + ' ' +
+          conf.find('.conf-place').text()
+        ).toLowerCase();
+        if (text.indexOf(searchQuery) === -1) {
+          show = false;
+        }
+      }
+
       // Check each filter group
       Object.keys(selectedFilters).forEach(filterGroup => {
         if (selectedFilters[filterGroup].size > 0) {
@@ -266,7 +281,6 @@ $(function() {
         }
       });
 
-      // Show or hide based on filter matching
       if (show) {
         conf.show();
       } else {
@@ -291,16 +305,27 @@ $(function() {
 
   // Handle "Clear Filters" button click
   $("#clear-filters").click(function () {
-    // Uncheck all checkboxes
     $(".filter-checkbox").prop("checked", false);
-
-    // Reset the selected filters
     selectedFilters = {
       filter1: new Set(),
       filter2: new Set(),
       filter3: new Set()
     };
+    searchQuery = '';
+    $('#search-input').val('');
+    updateConfList();
+  });
+
+  // Search input handler
+  $('#search-input').on('input', function () {
+    searchQuery = $(this).val().toLowerCase().trim();
+    updateConfList();
+  });
 
+  // Clear search button
+  $('#clear-search').click(function () {
+    searchQuery = '';
+    $('#search-input').val('').focus();
     updateConfList();
   });