Widget: Imagesearch: Unterschied zwischen den Versionen
Admin (Diskussion | Beiträge) (Die Seite wurde neu angelegt: „<head> <meta charset="UTF-8" /> <title>Search Form</title> <style> table, th, td { border: 1px solid black; border-collapse: collapse; padding: 8px; } img { max-width: 100px; } </style> </head> <body> <h2>Search</h2> <form id="searchForm"> <label for="freeSearch">Free Search:</label> <input type="text" id="freeSearch" name="freeSearch" /> <label for="category">Category:</label> <select id="category" name="category"> <option value="">-- Select Category --…“) Markierung: Quelltext-Bearbeitung 2017 |
Admin (Diskussion | Beiträge) Keine Bearbeitungszusammenfassung Markierung: Quelltext-Bearbeitung 2017 |
||
| (5 dazwischenliegende Versionen desselben Benutzers werden nicht angezeigt) | |||
| Zeile 3: | Zeile 3: | ||
<title>Search Form</title> | <title>Search Form</title> | ||
<style> | <style> | ||
table, th, td { | table.imagesearchresult, .imagesearchresult th, .imagesearchresult td { | ||
border: 1px solid black; | border: 1px solid black; | ||
border-collapse: collapse; | border-collapse: collapse; | ||
padding: 8px; | padding: 8px; | ||
} | } | ||
img { | img.search_result { | ||
max-width: 100px; | max-width: 100px; | ||
} | } | ||
| Zeile 57: | Zeile 57: | ||
return; | return; | ||
} | } | ||
const domain = window.location.origin; | |||
const url = ` | const url = domain+`/antelope/search?query=${encodeURIComponent(queryValue)}&threshold=${threshold}&show_url=true`; | ||
try { | try { | ||
| Zeile 73: | Zeile 73: | ||
// Build result table | // Build result table | ||
let tableHTML = "<table><tr><th>ID</th><th>Score</th><th>Image</th><th>URL</th></tr>"; | let tableHTML = "<table class="imagesearchresult"><tr><th>ID</th><th>Score</th><th>Image</th><th>URL</th></tr>"; | ||
data.result.forEach(item => { | data.result.forEach(item => { | ||
item.url = item.url.replaceAll('wb.hh.datengrill.de', 'wb.manorhouses.tibwiki.io'); | |||
tableHTML += ` | tableHTML += ` | ||
<tr> | <tr> | ||
<td>${item.id}</td> | <td>${item.id}</td> | ||
<td>${item.score.toFixed(4)}</td> | <td>${item.score.toFixed(4)}</td> | ||
<td><img src="${item.url}" alt="${item.id}" /></td> | <td><img class="search_result" src="${item.url}" alt="${item.id}" /></td> | ||
<td><a href="${item.url}" target="_blank">${item.url}</a></td> | <td><a href="${item.url}" target="_blank">${item.url}</a></td> | ||
</tr> | </tr> | ||
Aktuelle Version vom 20. August 2025, 10:19 Uhr
<head> <meta charset="UTF-8" /> <title>Search Form</title> <style> table.imagesearchresult, .imagesearchresult th, .imagesearchresult td { border: 1px solid black; border-collapse: collapse; padding: 8px; } img.search_result { max-width: 100px; } </style> </head> <body>
Search
<form id="searchForm"> <input type="text" id="freeSearch" name="freeSearch" />
<select id="category" name="category"> <option value="">-- Select Category --</option> <option value="landscape">landscape</option> <option value="painting">painting</option> <option value="building">building</option> <option value="map">map</option> </select>
<input type="range" id="threshold" name="threshold" min="0" max="1" step="0.01" value="0.61" />
<button type="submit">Send</button> </form>
Results
<script> document.getElementById('searchForm').addEventListener('submit', async function(event) { event.preventDefault();
const freeSearch = document.getElementById('freeSearch').value.trim(); const category = document.getElementById('category').value; const threshold = document.getElementById('threshold').value;
let queryValue = ; if (freeSearch && category) { alert("Please fill only one: Free Search OR Category."); return; } else if (freeSearch) { queryValue = freeSearch; } else if (category) { queryValue = category; } else { alert("Please enter a search term or select a category."); return; } const domain = window.location.origin; const url = domain+`/antelope/search?query=${encodeURIComponent(queryValue)}&threshold=${threshold}&show_url=true`;
try { const response = await fetch(url); if (!response.ok) throw new Error("Network response was not ok.");
const data = await response.json();
const resultsDiv = document.getElementById('results'); if (!data.result || data.result.length === 0) {
resultsDiv.innerHTML = "
No results found.
";
return; }
// Build result table
let tableHTML = "
";data.result.forEach(item => { item.url = item.url.replaceAll('wb.hh.datengrill.de', 'wb.manorhouses.tibwiki.io'); tableHTML += `
`; }); tableHTML += "| ID | Score | Image | URL |
|---|---|---|---|
| ${item.id} | ${item.score.toFixed(4)} | <img class="search_result" src="${item.url}" alt="${item.id}" /> | <a href="${item.url}" target="_blank">${item.url}</a> |
";
resultsDiv.innerHTML = tableHTML;
} catch (error) {
document.getElementById('results').innerHTML = `
Error: ${error.message}
`;
} }); </script>
<script> const thresholdSlider = document.getElementById('threshold'); const thresholdValueDisplay = document.getElementById('thresholdValue');
thresholdSlider.addEventListener('input', () => { thresholdValueDisplay.textContent = thresholdSlider.value; }); </script> </body>