Improving search sytem.

This commit is contained in:
2025-08-25 12:00:07 +02:00
parent 37c752ada5
commit 06d9c7882a
4 changed files with 18 additions and 82 deletions

View File

@@ -16,6 +16,10 @@ body {
font-family: Titillium Web;
}
input{
margin-top: 5px;
}
.search-result {
border: 2px solid white;
border-radius: 8px;

View File

@@ -23,12 +23,12 @@
<h1>Visualizzatore fermate START Romagna</h1>
<label for="bacino">Bacino:</label>
<select id="bacino">
<option value="" selected>--Scegli un'opzione--</option>
<option value="n" selected>--Scegli un'opzione--</option>
<option value="ra">Ravenna</option>
<option value="rn">Rimini</option>
<option value="fc">Forlì-Cesena</option>
</select>
<div>
<div id="ricerca" style="display: none;">
<label for="searchBar">Cerca fermata:</label>
<input type="text" id="searchBar" placeholder="Cerca una fermata...">
</div>

View File

@@ -50,12 +50,19 @@ document.getElementById('bacino').addEventListener('change', function(event) {
const selectedOption = event.target.value;
currentSelectedOption = selectedOption;
if (!selectedOption) {
const ricerca = document.getElementById('ricerca');
ricerca.removeAttribute('style');
document.getElementById('searchBar').value = "";
if(selectedOption == "n"){
ricerca.setAttribute("style", "display: none;");
allOptions = [];
document.getElementById('searchResults').innerHTML = '';
return;
}
if(selectedOption != "n"){
const resultsContainer = document.getElementById('searchResults');
resultsContainer.innerHTML = '<p>Caricamento lista fermate in corso...</p>';
@@ -69,4 +76,5 @@ document.getElementById('bacino').addEventListener('change', function(event) {
resultsContainer.innerHTML = '<p>Errore nel caricamento delle fermate.</p>';
console.error('Errore:', err);
});
}
});

View File

@@ -1,76 +0,0 @@
function populateSearchResults(results, selectedOption) {
const searchResultsContainer = document.getElementById('searchResults');
searchResultsContainer.innerHTML = '';
if (results.length === 0) {
searchResultsContainer.innerHTML = '<p>Nessun risultato trovato</p>';
return;
}
var w = 900;
var h = 600;
var l = Math.floor((screen.width-w)/2);
var t = Math.floor((screen.height-h)/2);
results.forEach(item => {
const div = document.createElement('div');
div.className = 'search-result';
div.innerHTML = `
<div>
<h3>${item.nome}</h3>
<p>Palina: ${item.palina}, Target ID: ${item.targetID}</p>
</div>
`;
div.addEventListener('click', () => {
const url = `fermata.html?palina=${encodeURIComponent(item.palina)}&targetID=${encodeURIComponent(item.targetID)}&selectedOption=${encodeURIComponent(selectedOption)}`;
window.open(url, "","top=" + t + ",left=" + l + ",width=" + w + ",height=" + h + ",status=no,menubar=no,toolbar=no scrollbars=yes");
});
searchResultsContainer.appendChild(div);
});
}
function filterOptions(query, data) {
const q = query.toLowerCase();
return data.filter(item =>
(item.nome || '').toLowerCase().includes(q) ||
(item.palina || '').toLowerCase().includes(q) ||
(item.targetID || '').toLowerCase().includes(q)
);
}
let allOptions = [];
let currentSelectedOption = '';
const searchBar = document.getElementById('searchBar');
searchBar.addEventListener('input', function() {
const query = searchBar.value;
const filteredOptions = filterOptions(query, allOptions);
populateSearchResults(filteredOptions, currentSelectedOption);
});
document.getElementById('bacino').addEventListener('change', function(event) {
const selectedOption = event.target.value;
currentSelectedOption = selectedOption;
if (!selectedOption) {
allOptions = [];
document.getElementById('searchResults').innerHTML = '';
return;
}
const resultsContainer = document.getElementById('searchResults');
resultsContainer.innerHTML = '<p>Caricamento lista fermate in corso...</p>';
fetch(`https://api.vichingo455.freeddns.org/fermateapi/bacino?selectedOption=${selectedOption}`)
.then(res => res.json())
.then(data => {
allOptions = data;
populateSearchResults(allOptions, selectedOption);
})
.catch(err => {
resultsContainer.innerHTML = '<p>Errore nel caricamento delle fermate.</p>';
console.error('Errore:', err);
});
});