Originalmente inviato da
mzanella
La ricerca avviene in maniera interattiva: i risultati sono stati diversi della stessa pagina, non pagine diverse, quindi il tasto indietro non funziona.
Una cosa che si può fare è decidere se e quali risultati mostrare all'apertura della pagina, quando non sono stati ancora impostati filtri.
Molti siti propongono tutti i prodotti (o una selezione di essi: i più visti o i più venduti) in prima pagina, se si fa una ricerca e si torna indietro si ritrovano gli stessi risultati per poter continuare ad esaminare i prodotti e non ricercarli di nuovo. Ci sono delle scomode eccezioni, ma generalmente funzionano tutti così. Dai siti di appartamenti ad Amazon.
Originalmente inviato da
mzanella
Si potrebbe realizzare attraverso il JavaScript, ma è molto meglio farlo tramite CSS. Qualcosa come:
Codice:
.risultato-ricerca {
display: block;
text-align: center;
}
.risultato-ricerca a img {
display: block;
margin: auto;
}
E nel JavaScript le uniche modifiche da fare sono l'aggiunta della classe
risultato-ricerca al
div result_container e lo spostamento del testo dal
result_container al
link:
Codice:
var risultato = risultati[i];
var name = risultato.marca + ' ' + risultato.modello;
var image = $('<img>').attr('src', risultato.immagine).attr('width', 200).attr('alt', name).attr('title', name);
var link = $('<a>').attr('href', risultato.link');
var text = $('<strong>').html(risultato.marca + ' ' + risultato.modello);
var result_container = $('<div>').addClass('risultato-ricerca');
image.appendTo(link);
text.appendTo(link);
link.appendTo(result_container);
result_container.appendTo(container);
Vedendo il CSS capisco dove usi risultato ricerca, ma ".risultato-ricerca a img " cos'è?
Levo io l'apostrofo che ti è scappato di nuovo nella linea (volevi vedere se ero attento )
Codice:
var link = $('<a>').attr('href', risultato.link');
E funziona tutto.
Il problema qui è che stai ragionando ancora come se JavaScript usasse le stringhe. Quando crei un elemento, la sintassi è
$('<nome-tag>');, con quel codice stai cercando di creare un
tag nella forma
<br><strong>Marca Modello</br><strong> che non esiste, quindi non funziona. La procedura corretta sarebbe creare i due
tag separatamente ed aggiungerli al contenitore in ordine, ma è decisamente meglio usare il CSS come sopra.
Si, sono ancorato alla logica html :(
Ricapitoliamo (così chi cerca di replicare il codice non deve leggersi tutto e capire tutto).
Abbiamo prima della chiusura dell'Head (borgia è un bordino e un table colorato, altrimenti ci si confonde tra un prodotto e l'altro. Visti in verticale con scroll-bar non è il massimo)
Codice:
<style type="text/css">
.borgia {
border: solid 1px #cccccc;
background-color: #fcfddf;
margin-left: 3px;
margin-right: 3px;
padding: 3px;
}
.risultato-ricerca {
display: block;
text-align: center;
}
.risultato-ricerca a img {
display: block;
margin: auto;
}
</style>
Tanto per complicare le cose ho aggiunto due parametri: la frequenza e il tipo di codifica.
Codice:
ACM|TX Copy|tx-copy.htm|images/TX-Copy-Bicanale-fm-433,92-.jpg|2|arancio|433.92MHz|Rolling Code
ACM|TX Dip|tx-dip.html|images/TX-Dip.jpg|2|arancio|433.92MHz|Codice fisso
ACM|TX2 Small|tx2-small---solo-foto.html|images/TX2-SMALL-Bicanale-fm-433,9.jpg|2|arancio|433.92MHz|Rolling Code
ACM|TX4|tx4---solo-foto.html|images/tx4-retro.jpg|4|grigio|433.92MHz|Rolling Code
ADHER|A433 - 433.92MHz|adher-a433-433.92mhz.html|images/Adher-A433--433.92Mhz-1-.jpg|1|bianco|433.92MHz|Codice fisso
Poi abbiamo l'HTML (naturalmente ho aggiunto i select e messo il borgia come stile aggiuntivo)
Codice HTML:
<form method="GET" action="" id="ricerca-prodotti">
<label>Marche telecomandi</label>
<select name="marca" class="ricerca-prodotti-input">
<option value="">---</option>
<option value="acm">Acm</option>
<option value="adher">Adher</option>
<option value="allducks">Allducks</option>
<option value="aprimatic">Aprimatic</option>
<option value="ballan">Ballan</option>
<option value="bft">BFT</option>
<option value="cardin">Cardin</option>
<option value="cg2a">CG2A</option>
<option value="dirichx">Dirickx</option>
<option value="ducati">Ducati</option>
<option value="faac">FAAC</option>
<option value="genius">Genius</option>
<option value="gobbato">Gobbato</option>
<option value="jcm">JCM</option>
<option value="jl">JL</option>
<option value="label">Label</option>
<option value="luminox">Luminox</option>
<option value="mk-techno">MK-Techno</option>
<option value="nice">Nice</option>
<option value="0 e 0">O e O</option>
<option value="quasar">Quasar</option>
<option value="rib">Rib</option>
<option value="siminor">Siminor</option>
<option value="telcoma">Telcoma</option>
</select>
<label for="tasti">Numero dei tasti:</label>
<input type="range" name="numero_tasti" class="ricerca-prodotti-input" list="tasti_list" step="1" min="0" max="4">
<datalist id="tasti_list">
<option value="">-</option>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
</datalist>
<label>Colore tasti</label>
<select name="colore_tasti" class="ricerca-prodotti-input">
<option value="">---</option>
<option value="rosso">Rosso</option>
<option value="nero">Nero</option>
<option value="bianco">Bianco</option>
<option value="arancio">Arancio</option>
<option value="grigio">Grigio</option>
</select>
<label>Frequenza</label>
<select name="frequenza" class="ricerca-prodotti-input">
<option value="">---</option>
<option value="433.92MHz">433.92MHz</option>
<option value="30.875MHz">30.875MHz</option>
<option value="29.997MHz">29.997MHz</option>
</select>
<label>Tipo codifica</label>
<select name="codifica" class="ricerca-prodotti-input">
<option value="">---</option>
<option value="Codice fisso">Codice fisso</option>
<option value="Rolling Code">Rolling Code</option>
<option value="entrambi">entrambi</option>
</select>
</form>
<h2>Risultati ricerca:</h2>
<div id="risultati-ricerca"></div>
<script>
function mostra_risultati(risultati) {
var container = $('#risultati-ricerca');
container.empty();
if (risultati.length == 0) {
container.append($('<p>Nessun risultato trovato</p>'));
}
else {
container.append($('<p>Hai trovato ' + risultati.length + ' telecomandi.</p>'));
}
for (var i = 0; i < risultati.length; ++i) {
var risultato = risultati[i];
var name = risultato.marca + ' ' + risultato.modello;
var image = $('<img>').attr('src', risultato.immagine).attr('width', 200).attr('alt', name).attr('title', name);
var link = $('<a>').attr('href', risultato.link);
var text = $('<strong>').html(risultato.marca + ' ' + risultato.modello);
var result_container = $('<div>').addClass('risultato-ricerca borgia');
image.appendTo(link);
text.appendTo(link);
link.appendTo(result_container);
result_container.appendTo(container);
}
}
$('.ricerca-prodotti-input').change(function () {
var form = $('#ricerca-prodotti');
$.get('motore-ricerca.php', form.serialize(), function (risultati) {
mostra_risultati(risultati);
});
});
</script>
e il php (sono stato attento alle virgole)
Codice PHP:
<?php
$marca = isset($_GET['marca']) && !empty($_GET['marca']) ? strtolower($_GET['marca']) : 'any';
$numero_tasti = isset($_GET['numero_tasti']) && !empty($_GET['numero_tasti']) ? strtolower($_GET['numero_tasti']) : 'any';
$colore_tasti = isset($_GET['colore_tasti']) && !empty($_GET['colore_tasti']) ? strtolower($_GET['colore_tasti']) : 'any';
$items = file('files/telecomandi2.txt', FILE_IGNORE_NEW_LINES);
$results = [];
foreach ($items as $record) {
$data = explode('|', $record);
if (($marca === 'any' || strtolower($data[0]) == $marca)) {
$results[] = [
'marca' => $data[0],
'modello' => $data[1],
'link' => $data[2],
'immagine' => $data[3],
'numero_tasti' => $data[4],
'colore_tasti' => $data[5],
'frequenza' => $data[6],
'codifica' => $data[7]
];
}
}
header('Content-Type: application/json');
echo json_encode($results);
?>
Funziona tutto al primo livello di filtro. nessun crash (è già tanto )