Spaces:
Sleeping
Sleeping
File size: 2,506 Bytes
67e646a |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 |
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Search</title>
<style>
table {
border-collapse: collapse;
margin-top: 20px;
}
table, th, td {
border: 1px solid #aaa;
padding: 6px 12px;
}
</style>
</head>
<body>
<h2>Search</h2>
<input type="text" id="searchBox" size="80" placeholder="Search..."><br>
<button onclick="runSearch()" id="searchButton">Search</button>
<div id="result"></div>
<script>
async function runSearch() {
const q = document.getElementById("searchBox").value;
const resultDiv = document.getElementById("result");
resultDiv.innerHTML = "Searching...";
// Your FastAPI endpoint (example):
const url = `https://wbrooks-coul-document-search.hf.space/search?q=${encodeURIComponent(q)}`;
try {
const response = await fetch(url);
if (!response.ok) {
resultDiv.innerHTML = `Error: ${response.status}`;
return;
}
const data = await response.json();
resultDiv.innerHTML = jsonToTable(data);
} catch (err) {
resultDiv.innerHTML = "Request failed: " + err;
}
}
// Convert array of objects → HTML table
function jsonToTable(jsonData) {
if (!jsonData || jsonData.length === 0) {
return "<p>No results.</p>";
}
const cols = Object.keys(jsonData[0]);
let html = "<table><thead><tr>";
cols.forEach(col => html += `<th>${col}</th>`);
html += "</tr></thead><tbody>";
jsonData.forEach(row => {
html += "<tr>";
cols.forEach(col => html += `<td>${row[col]}</td>`);
html += "</tr>";
});
html += "</tbody></table>";
return html;
}
const input = document.getElementById("searchBox");
const button = document.getElementById("searchBtn");
input.addEventListener("keydown", function(event) {
if (event.key === "Enter") { // check if Enter/Return is pressed
event.preventDefault(); // prevent default form submission if any
button.click(); // trigger the button click
}
});
button.addEventListener("click", function() {
const value = input.value;
console.log("Search for:", value);
// Here you could call fetch() to your API
});
</script>
</body>
</html>
|