Spaces:
Sleeping
Sleeping
| <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> | |