body { font-family: Arial, sans-serif; margin: 20px; }
h2 { margin-bottom: 10px; }
input { width: 300px; padding: 6px; margin-bottom: 15px; font-size: 16px; }
table { border-collapse: collapse; width: 100%; margin-top: 10px; }
th, td { border: 1px solid #ccc; padding: 8px; text-align: left; }
th { background-color: #f2f2f2; }
tr:nth-child(even) { background-color: #fafafa; }
.highlight { background-color: yellow; }
District Search Engine
const csvUrl = ‘https://docs.google.com/spreadsheets/d/1d0ThsnYwD5EZBCV_wlL8ZdUZyqkCtiixGilif8DVJqE/export?format=csv’;
let csvData = [];
// Fetch CSV data
fetch(csvUrl)
.then(response => response.text())
.then(text => parseCSV(text))
.catch(error => console.error(‘Error fetching CSV:’, error));
// Parse CSV into array of objects
function parseCSV(text) {
const lines = text.trim().split(‘n’);
const headers = lines[0].split(‘,’).map(h => h.trim());
csvData = lines.slice(1).map(line => {
const values = line.split(‘,’);
let obj = {};
headers.forEach((header, i) => obj[header] = values[i] ? values[i].trim() : ”);
return obj;
});
}
// Search box listener
document.getElementById(‘searchBox’).addEventListener(‘input’, function() {
const query = this.value.trim().toLowerCase();
if(query.length row[‘District’] && row[‘District’].toLowerCase().includes(query));
displayTable(filtered, query);
});
// Display results in table with optional highlighting
function displayTable(data, query) {
const tableHead = document.getElementById(‘tableHead’);
const tableBody = document.getElementById(‘tableBody’);
tableHead.innerHTML = ”;
tableBody.innerHTML = ”;
if(data.length === 0) return;
const headers = Object.keys(data[0]);
// Create table header
const headerRow = document.createElement(‘tr’);
headers.forEach(h => {
const th = document.createElement(‘th’);
th.textContent = h;
headerRow.appendChild(th);
});
tableHead.appendChild(headerRow);
// Create table rows
data.forEach(row => {
const tr = document.createElement(‘tr’);
headers.forEach(h => {
const td = document.createElement(‘td’);
if(query && row[h] && h.toLowerCase() === ‘district’) {
// highlight match in district column
const regex = new RegExp(`(${query})`, ‘gi’);
td.innerHTML = row[h].replace(regex, ‘$1‘);
} else {
td.textContent = row[h];
}
tr.appendChild(td);
});
tableBody.appendChild(tr);
});
}
// Clear table
function clearTable() {
document.getElementById(‘tableHead’).innerHTML = ”;
document.getElementById(‘tableBody’).innerHTML = ”;
}
[full_width]