Ricerca per filtri (o Motore a strati)

[legaitalianalibera]

Ho guardato molte pagine del forum ma non ho trovato un argomento simile.
In pratica mi servirebbe una ricerca per filtri.
Cioè un motore che prendendo da dei menu a tendina dei valori li cerchi in un file di testo.
Perchè un file di testo? Perchè ciò che sto scrivendo non ha un database per i prodotti, ma solo pagine statiche. Quindi salvare in un normale CVS i dati mi consentirebbe di ovviare al problema (tranne per il fatto che non voglio usare le virgole come separatore).
La ricerca per filtri è del tipo "Marca auto" "modello auto" "Cilindrata". In pratica mentre si compilano i menu a tendina si ha già il risultato senza submit.
La parte in html sarebbe

<table align="center" class="borgia" cellspacing="2" cellpadding="2" width="200">
<tbody><tr>
<td>
 <form name="form01" action="form01.php" method="POST">
<select name="marca" onchange="document.form01.submit();">
<option value="marca_A">Marca A</option>
<option value="marca_B">Marca B</option>
</select>
</form>
</td>
<td>
 <form name="form02" action="form01.php" method="POST">
<select name="modello" onchange="document.form02.submit();">
<option value="modello_A">Modello A</option>
<option value="modello_B">Modello B</option>
</select>
</form>
</td>
<td>
 <form name="form03" action="form01.php" method="POST">
<select name="cilindrata" onchange="document.form01.submit();">
<option value="cilindrata_A">999 CV</option>
<option value="cilindrata_B">1200 CV</option>
</select>
</form>
</td>

    
</tr>
</tbody>
</table>

A questo punto ci dovrebbe essere il PHP che deve generare nella stessa pagina il risultato della ricerca:
i dati sono memorizzati come
marca|modello|cilindrata|prezzo|etc.etc.
separati dalla linetta |

?php  
$array = file('files/dati3.txt', FILE_IGNORE_NEW_LINES);  
foreach ($array AS $single_record)
{
$link = explode('|',$single_record);

    if ($cilindrata=&link[2])

    {
        echo "$link[0] - $link[1] - $link[2] - $link[3] <br />";
    }
    else
    if ($modello=&link[1])

    {
        echo "$link[0] - $link[1] - $link[2] - $link[3] <br />";
    }
    else
    if ($marca=&link[0])
    {
        echo "$link[0] - $link[1] - $link[2] - $link[3] <br />";
    }
    else
    {
        echo "nessun risultato!";
    }
?> 

E ci credereste mai? Non funziona.

Qualche consiglio o idea?

[mzanella]

Potresti rivalutare l'idea di non usare MySQL. In pratica, ti stai creando "a mano" un database basato su file di testo.

Se preferisci comunque procedere in questo modo occhio agli errori: negli if stai usando l'assegnamento = al posto del confronto ==. Sempre negli if non c'è motivo di usare $link per riferimento anziché per valore.
Inoltre, di solito una ricerca per filtri richiede che tutti i valori corrispondano (congiunzione). Così come è scritto, il codice cerca invece risultati quando almeno uno tra cilindrata, modello e marca corrisponde con quelli dati (disgiunzione): è voluto?

<?php
$array = file('files/dati3.txt', FILE_IGNORE_NEW_LINES);
$results = [];
foreach ($array as $record) {
    $data = explode('|', $record);
    if ($data[0] == $marca || $data[1] == $modello || $data[2] == $cilindrata) {
        $results[] = $data;
    }
}

if (count($results) > 0) {
    echo "Trovati " . count($results) . " risultati: ";
    print_r($results);
}
else {
    echo "Nessun risultato!";
}
?>

Assumendo che $marca, $modello e $cilindrata siano state precedentemente definite.

[legaitalianalibera]

Per iniziare era CSV (Comma-separated values) e non CVS (Concurrent Versions System)... quando ho scritto il post il cervello era in modalità risparmio energetico
Il non usare MySQL è dovuto al programma che uso per fare le normali pagine HTML, è un editor di pagine web e non un CMS (Content Management System)... quindi crea pagine statiche e pensavo di sopperire ad alcune pecche con pezzi di php.

Se preferisci comunque procedere in questo modo occhio agli errori: negli if stai usando l'assegnamento = al posto del confronto ==. Sempre negli if non c'è motivo di usare $link per riferimento anziché per valore.

Me la spieghi meglio questa? Che significa $link per riferimento anzichè per valore?

Inoltre, di solito una ricerca per filtri richiede che tutti i valori corrispondano (congiunzione). Così come è scritto, il codice cerca invece risultati quando almeno uno tra cilindrata, modello e marca corrisponde con quelli dati (disgiunzione): è voluto?

In effetti è uno sbaglio. Dovrebbero essere soddisfatte tutte le condizioni man mano che le si definiscono.
Se metto la cilindrata deve trovarmi tutti i modelli e marche di quella cilindrata
Se metto cilindrata e marca deve trovarmi tutti i modelli di quella marca con quella cilindrata.

Quindi non è più un OR ma un AND.
Se questa condizione E quest'altra sono vere posta il risultato.

A questo punto

     if ($data[0] == $marca || $data[1] == $modello || $data[2] == $cilindrata) { 

va cambiato?

Ho creato dei dati normali invece di marca A e modello A

fiat|uno|999|8000€
Fiat|Cinquecento|999|12000€
Mini|Clubman|1100|17000€
Fiat|Ritmo|750|1500€
BMW|X3|2000|44200€

Ho riscritto la parte HTML mettendoci i dati del file auto01.txt

<table align="center" class="borgia" cellspacing="2" cellpadding="2" width="200">
<tbody><tr>
<td>
 <form name="form01" action="form01.php" method="POST">
<select name="marca" onchange="document.form01.submit();">
<option value="marca_A">BMW</option>
<option value="marca_B">Fiat</option>
<option value="marca_C">Mini</option>
</select>
</form>
</td>
<td>
 <form name="form02" action="form01.php" method="POST">
<select name="modello" onchange="document.form02.submit();">
<option value="modello_A">Cinquecento</option>
<option value="modello_B">Clubman</option>
<option value="modello_C">Ritmo</option>
<option value="modello_D">Uno</option>
<option value="modello_E">X3</option>
</select>
</form>
</td>
<td>
 <form name="form03" action="form01.php" method="POST">
<select name="cilindrata" onchange="document.form01.submit();">
<option value="cilindrata_A">750 CV</option>
<option value="cilindrata_B">999 CV</option>
<option value="cilindrata_C">1100 CV</option>
<option value="cilindrata_D">2000 CV</option>
</select>
</form>
</td>
    
</tr>
</tbody>
</table>

E qui sorge il primo scoglio, nell'Option devo scrivere a mano tutti i dati. Se li prendesse da solo dal file di testo sarebbe meglio.

Comunque ho inserito il php che hai scritto (quindi il php è nella root e il file di testo in cartella files, nessuno sbaglio nei percorsi)

<?php 
$array = file('files/auto01.txt', FILE_IGNORE_NEW_LINES); 
$results = []; 
foreach ($array as $record) { 
    $data = explode('|', $record); 
    if ($data[0] == $marca || $data[1] == $modello || $data[2] == $cilindrata) { 
        $results[] = $data; 
    } 
} 

if (count($results) > 0) { 
    echo "Trovati " . count($results) . " risultati: "; 
    print_r($results); 
} 
else { 
    echo "Nessun risultato!"; 
} 
?>

Adesso un risultato c'è (Ho cercato fiat clubman da 750cc): si apre una nuova pagina (che non è il massimo e...

Trovati 5 risultati: Array ( [0] => Array ( [0] => fiat,uno,999,8000� ) [1] => Array ( [0] => Fiat,Cinquecento,999,12000� ) [2] => Array ( [0] => Mini,Clubman,1100,17000� ) [3] => Array ( [0] => Fiat,Ritmo,750,1500� ) [4] => Array ( [0] => BMW,X3,2000,44200� ) )

Per il carattere € posso rimediare, ma ha preso tutti i dati.

[mzanella]

Me la spieghi meglio questa? Che significa $link per riferimento anzichè per valore?

Il passaggio per valore si basa su una "copia" del valore:

function foo($a) {
    $a = $a + 10;
}

$a = 0;
foo($a); // Passa una copia di $a
echo $a; // Stampa 0 

Quello per riferimento si basa sulla cella di memoria occupata dalla variabile, e si indica con &:

function foo(&$a) {
    $a = $a + 10;
}

$a = 0;
foo($a); // Passa un riferimento a $a
echo $a; // Stampa 10 

Di solito si usa il passaggio per valore per semplicità, a meno che non ci sia un buon motivo per usare il passaggio per riferimento.

In effetti è uno sbaglio. Dovrebbero essere soddisfatte tutte le condizioni man mano che le si definiscono.

Allora basta modificare le or in and nell'if:

if ($data[0] == $marca && $data[1] == $modello && $data[2] == $cilindrata) 

Adesso un risultato c'è (Ho cercato fiat clubman da 750cc): si apre una nuova pagina (che non è il massimo e...

Trovati 5 risultati: Array ( [0] => Array ( [0] => fiat,uno,999,8000� ) [1] => Array ( [0] => Fiat,Cinquecento,999,12000� ) [2] => Array ( [0] => Mini,Clubman,1100,17000� ) [3] => Array ( [0] => Fiat,Ritmo,750,1500� ) [4] => Array ( [0] => BMW,X3,2000,44200� ) )

Per il carattere € posso rimediare, ma ha preso tutti i dati.

L'output in quel formato è causato dal fatto che i dati sono separati da virgola e non da pipe (|), quindi la explode non funziona come ci si aspetterebbe.

[legaitalianalibera]

Ho aggiunto tre

<option value="----">---</option>

nell'html per avere i menu a tendina che partono da zero.
Ho provato a mettere Fiat (ne ho 3) e...

Nessun risultato!

Ci ho riflettuto, se almeno uno dei valori deve essere soddisfatto man mano che si hanno le caselle riempite (non dimentichiamoci che non c'è un tasto submit e quindi deve dare il risultato immediato.
Quindi all'inizio cerca i dati e tira fuori quelli che rispondono ad almeno uno dei parametri
Poi devono rispondere a due parametri
Alla fine a tutti i parametri.
E anche rispondendo a tutti i parametri possono esserci più modelli (pensiamo alle varie versioni della fiat 500, uguale cilindrata ma allestimenti diversi)
E quindi è un AND o un OR che ci serve?
Per logica direi un AND, ma per provare ho rimesso

     if ($data[0] == $marca || $data[1] == $modello || $data[2] == $cilindrata) { 

Nessun risultato!

E la cosa è strana, prima qualcosa trovava.
In questo momento ci sono i segni giusti (|), ci sono i dati e il codice è

<?php  
$array = file('files/auto01.txt', FILE_IGNORE_NEW_LINES);  
$results = [];  
foreach ($array as $record) {  
    $data = explode('|', $record);  
    if ($data[0] == $marca && $data[1] == $modello && $data[2] == $cilindrata)   {  
        $results[] = $data;  
    }  
}  

if (count($results) > 0) {  
    echo "Trovati " . count($results) . " risultati: ";  
    print_r($results);  
}  
else {  
    echo "Nessun risultato!";  
}  
?>

Però due problemi rimangono: si visualizza il tutto in una nuova pagina e non trova i risultati...
Sono sempre confuso, ma faccio a tutti auguri di un buon Natale :)

[mzanella]

Ci ho riflettuto, se almeno uno dei valori deve essere soddisfatto man mano che si hanno le caselle riempite (non dimentichiamoci che non c'è un tasto submit e quindi deve dare il risultato immediato.
[...]
Però due problemi rimangono: si visualizza il tutto in una nuova pagina e non trova i risultati...

ALT! Questo cambia tutto.
Un conto è usare il meccanismo "standard" con il quale imposti i parametri in una pagina, li invii ad un'altra e questa mostra un risultato, tutt'altra cosa è prevedere un'interfaccia dinamica. Per questo scopo hai bisogno di usare AJAX, quindi JavaScript.

La pagina PHP a cui stai lavorando non deve produrre del codice HTML, ma un JSON (o XML, se preferisci). La pagina in cui hai il form dovrà, attraverso JavaScript, effettuare richieste verso la pagina PHP ogni volta che viene selezionato o cambiato qualcosa, e dovrà mostrare i risultati ricevuti creando dinamicamente elementi HTML. Meglio cominciare dando un'occhiata a jQuery AJAX Introduction.

Poi resta comunque da risolvere il problema dei risultati.

[legaitalianalibera]

Lo sto leggendo, non ci sono molte funzioni ma sembrano adatte per fare quel che mi serve...
Adesso devo scrivere il codice...

Mi sono scervellato con gli esempi presenti, poi ho cominciato a cercare in giro trovando https://forum.mrwebmaster.it/threads...-jquery.48340/ che fa proprio al caso mio... prende dei dati e li mette in un option select.

<script src="http://code.jquery.com/jquery-1.8.0.min.js"></script>
<script>
    $.get('auto01.txt', function (file) {
        allTextLines = file.split(/\r\n|\n/);
            $.each(allTextLines, function (elem) {
                var riga = allTextLines[elem].split("|");
                        $('risultato').append('<option value="' + riga[1] + '">' + riga[0] + '</option>');
            });
    });
</script>
<div id="risultato"></div>

E naturalmente non funziona.
Allora ho cercato qualcosa di più semplice: leggere un file e visualizzarlo a video: https://stackoverflow.com/questions/...-from-csv-file
Ma qualcosa non va... non funziona nulla...

Per logica devo prendere il testo, ma per stamparlo a video?
Ho provato con i vari esempi

<h2>jQuery and AJAX is FUN!!!</h2>
<p id="p1">This is some text in a paragraph.</p>

Ma appena cerco di sviluppare qualcosa non si vede altro che il testo standard...
C'è qualcosa di base che ignoro? Le librerie le carico...

[mzanella]

Quando scrivi codice JavaScript guarda sempre la console del browser, eventuali errori sono riportati lì.

Nel codice che hai mostrato ad occhio è sbagliato il selettore, essendo un id va usato il carattere #:

$('#risultato').append('<option value="' + riga[1] + '">' + riga[0] + '</option>');

Inoltre le <option> devono stare dentro una <select>, non un <div>:

<select id="risultato"></div>

[legaitalianalibera]

In pratica ora è:

<!DOCTYPE html>
<html>
<head>

<script src="http://code.jquery.com/jquery-1.8.0.min.js"></script>
<script>
    $.get('auto01.txt', function (file) {
        allTextLines = file.split(/\r\n|\n/);
            $.each(allTextLines, function (elem) {
                var riga = allTextLines[elem].split("|");
                        
                        $('#risultato').append('<option value="' + riga[1] + '">' + riga[0] + '</option>');
            });
    });
</script>
<select id="risultato"></div>

</head>
<body>

Ma a parte un box vuoto non mostra nulla.

Se volessi stampare a video tutti i risultati man mano che li legge? Per capire cosa legge e le righe lette?

[mzanella]

Questa pagina è online? Potrebbe essere utile vederla in azione per capire cosa non va.

[legaitalianalibera]

In effetti si, io sto usando un programma per le pagine web (Website WSX5) e di default carica
/*! jQuery v3.0.0 | (c) jQuery Foundation | jquery.org/license */
Quindi per le prove uppavo un file fatto col blocco note.
Ora ho trasportato il tutto sul programma e cambiato testi ma avrò la doppia chiamata alle Jquery

http://veronacitysera.altervista.org...ove-motore.php
Ora i testi si vedono, magari per le Jquery doppie o per quelle più nuove?

Il primo problema è che mi prende tutti i testi
Il secondo è... una volta selezionato uno dovrà fare qualche azione, no?

[mzanella]

Ora ho trasportato il tutto sul programma e cambiato testi ma avrò la doppia chiamata alle Jquery

In che senso "doppia chiamata"?

Il secondo è... una volta selezionato uno dovrà fare qualche azione, no?

Immagino di sì, ma quale azione intraprendere devi deciderlo tu

[legaitalianalibera]

Buon anno

In che senso "doppia chiamata"?

Mel codice scritto sopra richiamo

<script src="http://code.jquery.com/jquery-1.8.0.min.js"></script>

E il programma usa una libreria che richiama

/*! jQuery v3.0.0 | (c) jQuery Foundation | jquery.org/license */

Immagino di sì, ma quale azione intraprendere devi deciderlo tu

Riassumiamo il tutto...

Ho visto tanti script, alle volte li provo e non va nulla (pagine bianche).
Quello che mi servirebbe/mi piacerebbe fare/avrei bisogno è un motore di ricerca con i filtri.

La prima fase è: un file di testo, delle select option e la visualizzazione dei risultati
La seconda fase è: ogni volta che creo una scheda si crea una riga sul file di testo
La terza fase (opzionale) sulla scheda prodotto i dati vengono presi dal file di testo

Direi che è un bel progetto...

Per adesso ho questo (imsearch.php?search= è un richiamo al motore di ricerca del programma che uso, ma quel motore è "troppo generoso" nel dare i risultati):

<table><tr>
<td>
<form name="form1" method="post" action=""> 
<label>Marche telecomandi</label> 
<select name="marche" onchange="location.href=form1.marche.value;"> 

  <option value="imsearch.php?search=ACM">Acm</option>
  <option value="imsearch.php?search=Adher">Adher</option>
  <option value="imsearch.php?search=Allducks">Allducks</option>
  <option value="imsearch.php?search=Aprimatic">Aprimatic</option>
  <option value="imsearch.php?search=Ballan">Ballan</option>
  <option value="imsearch.php?search=BFT">BFT</option>
  <option value="imsearch.php?search=Cardin">Cardin</option>
  <option value="imsearch.php?search=CG2A">CG2A</option>
  <option value="imsearch.php?search=Dirickx">Dirickx</option>
  <option value="imsearch.php?search=Ducati">Ducati</option>
  <option value="imsearch.php?search=FAAC">FAAC</option>
  <option value="imsearch.php?search=Genius">Genius</option>
  <option value="imsearch.php?search=Gobbato">Gobbato</option>
  <option value="imsearch.php?search=JCM">JCM</option>
  <option value="imsearch.php?search=JL">JL</option>
  <option value="imsearch.php?search=Label">Label</option>
  <option value="imsearch.php?search=Luminox">Luminox</option>
  <option value="imsearch.php?search=MK-Techno">MK-Techno</option>
  <option value="imsearch.php?search=Nice">Nice</option>
  <option value="imsearch.php?search=O e O">O e O</option>
  <option value="imsearch.php?search=Quasar">Quasar</option>
  <option value="imsearch.php?search=Rib">Rib</option>
  <option value="imsearch.php?search=Siminor">Siminor</option>
  <option value="imsearch.php?search=Telcoma">Telcoma</option>
</select> 
</form>
</td><td>
<label for="tasti">Numero dei tasti:</label>
<input type="range" name="tasti" id="tasti" list="tasti_list"
  step="1" min="1" max="4">
<datalist id="tasti_list">
  <option>1</option>
  <option>2</option>
  <option>3</option>
  <option>4</option>
</datalist>
</td><td>
<form name="form3" method="post" action=""> 
<label>Colore tasti</label> 
<select name="coltasti" onchange="location.href=form2.collegamenti2.value;"> 

  <option value="imsearch.php?search=rossi">Rossi</option>
  <option value="imsearch.php?search=Neri">Neri</option>
  <option value="imsearch.php?search=Bianchi">Bianchi</option>
  <!-- more -->
</select>
</form>
</td>
</tr></table>

Un form che mi mostra tre campi di ricerca senza pulsante di conferma.
Ora debbo prendere i dati da un file di testo e metterli al posto del primo option value

Per fare questo tentavo di usare

<!DOCTYPE html>
<html>
<head>

<script src="http://code.jquery.com/jquery-1.8.0.min.js"></script>
<script>
    $.get('files/telecomandi2.txt', function (file) {
        allTextLines = file.split(/\r\n|\n/);
            $.each(allTextLines, function (elem) {
                var riga = allTextLines[elem].split("|");
                        
                        $('#risultato').append('<option value="' + riga[1] + '">' + riga[0] + '</option>');
            });
    });
</script>
<div><select id="risultato"></div>

</head>
<body>

Anche se

                        $('#risultato').append('<option value="' + riga[1] + '">' + riga[0] + '</option>');

dubito sia giusto
i dati sono in http://veronacitysera.altervista.org...lecomandi2.txt
e mi serve solo il primo riga [0]
Nel frattempo avevo fatto altre prove, il progetto ogni tanto si visualizza giusto, ma deve mancare qualche chiusura di <table> o simili e il fondo pagina va a donnine allegre.
Però alle volte non si vede nulla.
Dipende dall'uppaggio e da come gli gira...
Il risultato (la pagina di prove alla quale lavoro) è http://veronacitysera.altervista.org...ove-motore.php

... idee?

[mzanella]

Mel codice scritto sopra richiamo

<script src="http://code.jquery.com/jquery-1.8.0.min.js"></script>

E il programma usa una libreria che richiama

/*! jQuery v3.0.0 | (c) jQuery Foundation | jquery.org/license */

Il secondo è solo un commento, non c'entra nulla .

Ho visto tanti script, alle volte li provo e non va nulla (pagine bianche).

Questo succede quasi sempre, difficilmente trovi uno script pronto all'uso che faccia esattamente ciò di cui hai bisogno.

Sicuro di voler continuare ad usare un file di testo per i dati? Ci metterai molto più tempo per scrivere il codice per simulare una base di dati basata su file di testo che non a imparare a usare MySQL per lo stesso scopo...

Ad ogni modo, il funzionamento generali e le fasi vanno riviste. Alla fine devi arrivare ad avere:

• un file HTML (o PHP) che rappresenta la pagina di ricerca
• un file PHP che svolge il ruolo di motore di ricerca, accetta i parametri di ricerca e restituisce un contenuto JSON
• un file HTML (o PHP) che mostri la scheda di un singolo prodotto

oltre ai meccanismi per gestire l'inserimento di nuove schede.

La pagina di ricerca, da quanto ho inteso, deve contenere un form per inserire i parametri di ricerca e uno spazio in cui mostrare l'elenco dei risultati. La ricerca e l'aggiornamento della lista dei risultati devono avvenire nella stessa pagina in maniera interattiva, quindi usando JavaScript per recuperare l'elenco dei risultati e mostrarlo ogni volta viene selezionato qualcosa.

Il motore di ricerca riceve, tramite parametri GET, le informazioni (o filtri) da cercare. Accede al file di testo (o base di dati), recupera le informazioni sui prodotti che rispettano contemporaneamente tutti i filtri e li restituisce, in formato JSON. Al momento c'è qualche problema nel realizzarla, perché nel file di testo che hai mostrato non ci sono le informazioni sul numero e colore dei tasti che invece prevedi di poter usare come parametro di ricerca.

La pagina che mostra la scheda prodotto al momento non è realizzabile perché non hai nessun modo per identificare univocamente un prodotto. Avresti bisogno di un identificatore univoco per ciascun prodotto o meccanismo analogo.

Ricapitolando ti servono:

1. modulo per inserimento dei dati
2. contenitore per i risultati
3. codice JavaScript per identificare una selezione/modifica dei parametri
4. codice JavaScript per interrogare il motore di ricerca e recuperare la lista di risultati
5. codice Javascript per mostrare la lista di risultati
6. codice PHP per realizzare il motore di ricerca

La parte di inserimento dati nella pagina di ricerca potrebbe essere strutturata così:

<form method="GET" action="" id="ricerca-prodotti">
  <label>Marche telecomandi</label> 
  <select name="marca" class="ricerca-prodotti-input"> 
    <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="1" max="4">
  <datalist id="tasti_list">
    <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="rossi">Rossi</option>
    <option value="neri">Neri</option>
    <option value="bianchi">Bianchi</option>
  </select>
</form>

La classe ricerca-prodotti-input e l'id ricerca-prodotti sono stati aggiunti per semplificare i passi successivi.

Il contenitore per i risultati è semplicemente:

<div id="risultati-ricerca"></div>

JavaScript per identificare una selezione/modifica dei parametri, interrogare il motore di ricerca e recuperare la lista di risultati:

$('.risultati-ricerca').change(function () {
    var form = $('#ricerca-prodotti');

    $.get('motore-ricerca.php', form.serialize(), function (risultati) {
        mostra_risultati(risultati);
    });
});

JavaScript per mostrare la lista di risultati:

function mostra_risultati(risultati) {
    var container = $('#risultati-ricerca);

    container.empty();
    for (var i = 0; i < risultati.length; ++i) {
        var risultato = risultati[i];
        $('<div>').html(risultato.modello).appendTo(container);
    }

    if (risultati.length == 0) {
        container.append($('<p>Nessun risultato trovato</p>'));
    }
}

PHP per realizzare il motore di ricerca (mancano i filtri sul numero e colore dei tasti, in quanto non presenti nel file di testo):

$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' || $data[0] == strtolower($marca))) {
        $results[] = [
            'marca' => $data[0],
            'modello' => $data[1],
            'link' => $data[2],
            'immagine' => $data[3]
        ];
    }
}

header('Content-Type: application/json');
echo json_encode($results); 

Il codice è piuttosto lungo, quindi non escludo ci sia qualche errore di sintassi, ma complessivamente la logica è quella.

[legaitalianalibera]

Innanzitutto grazie, sto studiando e provando il tuo codice...
Deve esserti costato ore di lavoro e te ne ringrazio ancora.
Rispondo solo ad una cosa, la linea del JQuery è si remmata, ma esaminando il codice trovo

<script type="text/javascript" src="res/jquery.js?13-1-8-23"></script>

Che credo sia una chiamata ad una libreria del programma. Quindi abbiamo il mio richiamo

<script src="http://code.jquery.com/jquery-1.8.0.min.js"></script>

e questo secondo del programma.
Mi sa che ne levo uno. Quello messo a mano da me.

Torno a provare il codice, ancora grazie

[mzanella]

Mi sa che ne levo uno. Quello messo a mano da me.

Sì, ne basta uno solo. Con due credo ci sia il rischio che vadano in conflitto .

[legaitalianalibera]

Sicuro di voler continuare ad usare un file di testo per i dati? Ci metterai molto più tempo per scrivere il codice per simulare una base di dati basata su file di testo che non a imparare a usare MySQL per lo stesso scopo...

Al momento si, vedo più pratico modificarlo col blocco note, visto che non ho una pagina per visionarlo ed editarlo o un form di inserimento/modifica dei dati.

Ad ogni modo, il funzionamento generali e le fasi vanno riviste. Alla fine devi arrivare ad avere:

• un file HTML (o PHP) che rappresenta la pagina di ricerca
• un file PHP che svolge il ruolo di motore di ricerca, accetta i parametri di ricerca e restituisce un contenuto JSON
• un file HTML (o PHP) che mostri la scheda di un singolo prodotto

Queste schede sono statiche e non generate da un db e quindi le faccio io a mano per ogni prodotto

oltre ai meccanismi per gestire l'inserimento di nuove schede.

Ecco, quando inserisco le schede o modifico a mano il txt o creo una pagina per modificarlo. Ma il creare una pagina per modificarlo è un secondo (o terzo) passo

La pagina di ricerca, da quanto ho inteso, deve contenere un form per inserire i parametri di ricerca e uno spazio in cui mostrare l'elenco dei risultati. La ricerca e l'aggiornamento della lista dei risultati devono avvenire nella stessa pagina in maniera interattiva, quindi usando JavaScript per recuperare l'elenco dei risultati e mostrarlo ogni volta viene selezionato qualcosa.

Il motore di ricerca riceve, tramite parametri GET, le informazioni (o filtri) da cercare. Accede al file di testo (o base di dati), recupera le informazioni sui prodotti che rispettano contemporaneamente tutti i filtri e li restituisce, in formato JSON. Al momento c'è qualche problema nel realizzarla, perché nel file di testo che hai mostrato non ci sono le informazioni sul numero e colore dei tasti che invece prevedi di poter usare come parametro di ricerca.

Il file di testo è un esempio, nemmeno completo, ma che si basa su alcuni prodotti inseriti.
Ho messo un paio di campi in più per numero e colore, ora è:

ACM|TX Copy|tx-copy.htm|images/TX-Copy-Bicanale-fm-433,92-.jpg|2|arancio
ACM|TX Dip|tx-dip.html|images/TX-Dip.jpg|2|arancio
ACM|TX2 Small|tx2-small---solo-foto.html|images/TX2-SMALL-Bicanale-fm-433,9.jpg|2|arancio
ACM|TX4|tx4---solo-foto.html|images/tx4-retro.jpg|4|grigi
ADHER|A433 - 433.92MHz|adher-a433-433.92mhz.html|images/Adher-A433--433.92Mhz-1-.jpg|1|bianco

e si trova sempre in http://veronacitysera.altervista.org...lecomandi2.txt

La pagina che mostra la scheda prodotto al momento non è realizzabile perché non hai nessun modo per identificare univocamente un prodotto. Avresti bisogno di un identificatore univoco per ciascun prodotto o meccanismo analogo.

La combinazione marca+nome del telecomando è un identificatore univoco. Non esistono possibilità di doppioni, non c'è un modello che si chiami come un precedente dopo qualche anno. Tanto per intendersi non c'è la possibilità di una Fiat 500 del 1966 e una del 2015. C'è una lettera, una sigla o altro che differenziano sempre un modello da un altro. Per esempio, esistono due Ditec Gol4, ma uno dei due ha come sigla Ditec Gol4 e il secondo Ditec Gol4C.

Ricapitolando ti servono:

1. modulo per inserimento dei dati
2. contenitore per i risultati
3. codice JavaScript per identificare una selezione/modifica dei parametri
4. codice JavaScript per interrogare il motore di ricerca e recuperare la lista di risultati
5. codice Javascript per mostrare la lista di risultati
6. codice PHP per realizzare il motore di ricerca

La parte di inserimento dati nella pagina di ricerca potrebbe essere strutturata così:

<form method="GET" action="" id="ricerca-prodotti">
  <label>Marche telecomandi</label> 
  <select name="marca" class="ricerca-prodotti-input"> 
    <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="1" max="4">
  <datalist id="tasti_list">
    <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="rossi">Rossi</option>
    <option value="neri">Neri</option>
    <option value="bianchi">Bianchi</option>
  </select>
</form>

La classe ricerca-prodotti-input e l'id ricerca-prodotti sono stati aggiunti per semplificare i passi successivi.

E fin qui va bene, cambio solo alcuni parametri del terzo form per adattarlo a ciò che ho inserito nel file di testo

  <label>Colore tasto</label> 
  <select name="colore_tasti" class="ricerca-prodotti-input"> 
    <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>

Il contenitore per i risultati è semplicemente:

<div id="risultati-ricerca"></div>

JavaScript per identificare una selezione/modifica dei parametri, interrogare il motore di ricerca e recuperare la lista di risultati:

Questo immagino vada appena prima del Div id O sono due script esterni da richiamare? Mi sembrerebbe strano, ma possibile...

<script type="text/javascript">
$('.risultati-ricerca').change(function () {
    var form = $('#ricerca-prodotti');

    $.get('motore-ricerca.php', form.serialize(), function (risultati) {
        mostra_risultati(risultati);
    });
});
</script>

JavaScript per mostrare la lista di risultati:

<script type="text/javascript">
function mostra_risultati(risultati) {
    var container = $('#risultati-ricerca);

    container.empty();
    for (var i = 0; i < risultati.length; ++i) {
        var risultato = risultati[i];
        $('<div>').html(risultato.modello).appendTo(container);
    }

    if (risultati.length == 0) {
        container.append($('<p>Nessun risultato trovato</p>'));
    }
}
</script>

Aiuto, ho capito un quarto del codice scritto...

PHP per realizzare il motore di ricerca (mancano i filtri sul numero e colore dei tasti, in quanto non presenti nel file di testo):

<?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' || $data[0] == strtolower($marca))) {
        $results[] = [
            'marca' => $data[0],
            'modello' => $data[1],
            'link' => $data[2],
            'immagine' => $data[3]
        ];
    }
}

header('Content-Type: application/json');
echo json_encode($results);
?>

Ma va nella stessa pagina? Prima del Div? Come faccio a mettere i filtri per colore e numero?

Il codice è piuttosto lungo, quindi non escludo ci sia qualche errore di sintassi, ma complessivamente la logica è quella.

Ok, fatte delle prove, ho messo i <?php ... ?> e <script ... /script> ma...
Hummm, il codice php mi da problemi, mi viene visualizzato come testo... sposto il div e uguale...
Metto una graffa nel php (lo spazio l'hai lasciato, non so come mai manca... presumo un problema di copia&incolla)
Viene fuori un

Parse error: syntax error, unexpected end of file in /membri/veronacitysera/caravelli2/--prove-motore.php on line 275

sposto il Div alla fine ma qualcosa nel PHP non va...
Non è che manca un exit();
?

http://veronacitysera.altervista.org...ove-motore.php

[mzanella]

Il file di testo è un esempio, nemmeno completo, ma che si basa su alcuni prodotti inseriti.
Ho messo un paio di campi in più per numero e colore, ora è:
[...]
La combinazione marca+nome del telecomando è un identificatore univoco.

Ok, molto bene! Allora pensiamo prima a far funzionare il motore di ricerca almeno con la marca, una volta che è "stabile" sistemiamo anche il resto.

Ma va nella stessa pagina? Prima del Div? Come faccio a mettere i filtri per colore e numero?

In totale servono due pagine: una HTML con il form, il div ed il JavaScript ed una PHP con il motore di ricerca, che nel codice ho chiamato motore-ricerca.php e deve stare nella stessa cartella del file HTML. Nome e posizione possono essere cambiati, ma bisogna modificare il JavaScript di conseguenza, dunque lasciali così per ora.


Questa volta ho provato e rivisto il codice in alcuni punti: fai riferimento a questo anziché al precedente.
pagina HTML

<html>
...
<form method="GET" action="" id="ricerca-prodotti">
  <label>Marche telecomandi</label>
  <select name="marca" class="ricerca-prodotti-input">
    <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="1" max="4">
  <datalist id="tasti_list">
    <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="rosso">Rosso</option>
    <option value="nero">Nero</option>
    <option value="bianco">Bianco</option>
    <option value="arancio">Arancio</option>
    <option value="grigio">Grigio</option>
  </select>
</form>

<h2>Risultati ricerca:</h2>
<div id="risultati-ricerca"></div>


<script src="http://code.jquery.com/jquery-1.8.0.min.js"></script>
<script>
function mostra_risultati(risultati) {
    var container = $('#risultati-ricerca');

    container.empty();
    for (var i = 0; i < risultati.length; ++i) {
        var risultato = risultati[i];
        $('<div>').html(risultato.modello).appendTo(container);
    }

    if (risultati.length == 0) {
        container.append($('<p>Nessun risultato trovato</p>'));
    }
}


$('.ricerca-prodotti-input').change(function () {
    var form = $('#ricerca-prodotti');

    $.get('motore-ricerca.php', form.serialize(), function (risultati) {
        mostra_risultati(risultati);
    });
});
</script>
...
</html>

motore-ricerca.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]
        ];
    }
}

header('Content-Type: application/json');
echo json_encode($results);
?>

[legaitalianalibera]

Innanzitutto grazie dell'aiuto
L'ho provato e non funziona
Ho levato la chiamata al Javascript (in quanto doppia), l'ho rimessa e nulla... escono fuori sempre tre puntini prima e dopo. (quelli del codice)
Ho modificato l'HTML, levato i puntini.
Messo un valore nullo di partenza per non farlo partire da un punto preciso, controllato il file txt
Niente...

<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="1" max="4">
  <datalist id="tasti_list">
    <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>
</form>

<h2>Risultati ricerca:</h2>
<div id="risultati-ricerca"></div>

<script src="http://code.jquery.com/jquery-1.8.0.min.js"></script>
<script>
function mostra_risultati(risultati) {
    var container = $('#risultati-ricerca');

    container.empty();
    for (var i = 0; i < risultati.length; ++i) {
        var risultato = risultati[i];
        $('<div>').html(risultato.modello).appendTo(container);
    }

    if (risultati.length == 0) {
        container.append($('<p>Nessun risultato trovato</p>'));
    }
}


$('.ricerca-prodotti-input').change(function () {
    var form = $('#ricerca-prodotti');

    $.get('motore-ricerca.php', form.serialize(), function (risultati) {
        mostra_risultati(risultati);
    });
});
</script>

Il codice l'ho provato a riguardare per le mie conoscenze e ogni volta sembra normale. Ma non appare nulla.

controllo il file php e manca la graffa {

motore-ricerca.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]
        ];
    }
}

header('Content-Type: application/json');
echo json_encode($results);
?>

La metto e nulla.
Metto un controllo alla fine del php che non mi viene stampato
Richiamo il php da solo e ho il solito errore
Parse error: syntax error, unexpected end of file in /membri/veronacitysera/caravelli2/motore-ricerca.php on line 1064
http://veronacitysera.altervista.org...re-ricerca.php

come al solito la prova è su
http://veronacitysera.altervista.org...ove-motore.php

... in pratica sembra di capire che l'html non apre il php, altrimenti andrebbe in syntax error, però la chiamata c'è:

    $.get('motore-ricerca.php', form.serialize(), function (risultati) {

[mzanella]

controllo il file php e manca la graffa {

Quale graffa?

Parse error: syntax error, unexpected end of file in /membri/veronacitysera/caravelli2/motore-ricerca.php on line 1064

C'è qualcosa che non va, non può esserci un errore alla riga 1064, il file motore-ricerca.php contiene solo 22 righe.
Il file motore-ricerca.php contiene solo questo:

<?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]
        ];
    }
}

header('Content-Type: application/json');
echo json_encode($results);
?>

[legaitalianalibera]

Quale graffa?

Il codice così com'è se lasciato in una pagina html fa vedere solo del testo.
Esaminandolo avevo notato che mancava l'apertura di una parentesi graffa in questa riga vuota.

$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 = [];

Me lo segnalava PsPad (un notepad evoluto)

Però ora riguardandolo noto tutte le graffe...
Chissà come mai mi ero convinto ne mancasse una in apertura

C'è qualcosa che non va, non può esserci un errore alla riga 1064, il file motore-ricerca.php contiene solo 22 righe.
Il file motore-ricerca.php contiene solo questo:

<?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]
        ];
    }
}

header('Content-Type: application/json');
echo json_encode($results);
?>

hai ragione, è il template che si aggiunge. L'ho levato e uppato il file di testo semplice con estensione php. Ora il file ha solo quelle 22 righe lì.

E funziona!!!
Provo ad aggiungerci un altro paio di variabili al php

            'numero' => $data[4]
            'colore' => $data[5]

... e smette di funzionare

Torno al php originale

Inserisco

$i = 0;
$i = $i+1;
echo 'Hai trovato $i telecomandi';

Facendolo diventare

<?php
$i = 0;
$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]
        ];
    $i = $i+1;
    }
}

header('Content-Type: application/json');
echo json_encode($results);
echo 'Hai trovato $i telecomandi';
?>

E di nuovo non si vedono i risultati
Sbaglio la sintassi?

Comunque la base funziona, grazie

[legaitalianalibera]

Attenzione, mostro degli esempi e del codice solo al fine della discussione, non perderci tempo a controllarlo (o guardalo dopo che hai letto la conclusione)

Ho smanettato un po' con gli output e altro per migliorare la scelta del numero dei tasti
Ero arrivato a comprendere un form che mi scrive dei valori prima e dopo la barra dei tasti:

  <label for="tasti">Numero dei tasti:</label>
<div id="cont">
<span id="zero">0</span>
<input id='rangeInput' type=range min=0 max=4 value=0 step=1 name="numero_tasti" class="ricerca-prodotti-input" list="tasti_list" oninput="amount.value=rangeInput.value" />
<datalist id="tasti_list">
<option>0</option>
</datalist>
<span id="quattro">4</span>
</div>
<output id="amount" name="amount" for="rangeInput">0</output>

Con il relativo CSS, ma poi mi sono accorto che non è quello che mi serve.
Servirebbe qualcosa tipo https://camo.githubusercontent.com/2...6a34412e706e67

Poi ho visto questo:
https://codepen.io/juanbrujo/pen/uIqaw che inserito nella pagina fa un caos con la formattazione. Lo sposto e idem...
Poi ho implementato questo:
https://codepen.io/thebabydino/pen/bNQeeV

Splendido, inutile ma splendido. Cosa me ne faccio di quadrati? Ho bisogno di un selettore che se scelgo "1" mi mostri i telecomandi con un tasto e...

... e mi sono reso conto di una cosa: La mancanza di parametri di scelta non vuol dire "Non mostrare nessun telecomando", ma al contrario "mostrali tutti"
Cioè, in questo momento se seleziono la marca ACM o ADHER mi fa vedere i prodotti di quella marca, ma se non scelgo la marca deve farmi vedere tutti i telecomandi. E al momento non lo fa.
Così come se non scelgo il numero dei tasti debbo vedere tutti i telecomandi di quella marca indipendentemente dal numero dei tasti.
L'operatore logico quindi non è giusto. Quando saranno a posto i campi di scelta se si vogliono conoscere tutti i telecomandi con quattro tasti indipendentemente dalla marca restituirà il valore 0
Oppure ho capito male io?

[mzanella]

Bene per la base funzionante, vediamo di sistemare il resto.

Cominciamo dalle cose più semplici.
[quote]
Inserisco

$i = 0;
$i = $i+1;
echo 'Hai trovato $i telecomandi'; 

[/code]
Così non va bene: quando lavori con AJAX l'output della pagina "sorgente" (in questo caso motore-ricerca.php) non viene mostrato direttamente, ma elaborato dal JavaScript laddove serve. Concretamente significa che, per mostrare il numero di risultati, non devi intervenire sul PHP, ma sul JavaScript:

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];
        $('<div>').html(risultato.modello).appendTo(container);
    }
}

Provo ad aggiungerci un altro paio di variabili al php [...] e smette di funzionare

Probabilmente manca qualche virgola da qualche parte. Alla fine dovrebbe diventare così:

'marca' => $data[0], 
'modello' => $data[1], 
'link' => $data[2], 
'immagine' => $data[3],
'numero_tasti' => $data[4],
'colore_tasti' => $data[5] 

... e mi sono reso conto di una cosa: La mancanza di parametri di scelta non vuol dire "Non mostrare nessun telecomando", ma al contrario "mostrali tutti"

Il codice PHP prevede già questa possibilità: se viene passato un valore vuoto per un parametro non lo considera come filtro. Ora bisogna istruire il codice HTML affinché ci sia la possibilità di passare un valore vuoto. Ho visto che hai già inserito

<option value="-">---</option>

che ci va molto vicino: modifica in

<option value="">---</option>

E lo stesso vale per colore e numero tasti.

[mzanella]

Ora in teoria io mi passo tutte le variabili se il temecomando risponde ai requisiti giusti; credo di aver capito che per visualizzarlo devo metterlo nel JS ...

Esatto, dentro la funzione mostra_risultati:

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>');

        image.appendTo(link);
        link.appendTo(result_container);
        text.appendTo(result_container);
        result_container.appendTo(container);
    }
}

[legaitalianalibera]

Devo essere molto stanco per le feste, sono riuscito a cancellare il mio messaggio precedente mentre scrivevo questo...
Ok, ricominciamo... (non ho ben capito come ho fatto ma ho cancellato due messaggi, quello che stavo scrivendo e il vecchio).

Ricapitoliamo

Il codice è

<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>-</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>
</form>

<h2>Risultati ricerca:</h2>
<div id="risultati-ricerca"></div>

<h2>Risultati ricerca:</h2>
<div id="risultati-ricerca"></div>


<script src="http://code.jquery.com/jquery-1.8.0.min.js"></script>
<script>
function mostra_risultati(risultati) {
    var container = $('#risultati-ricerca');

    container.empty();
    for (var i = 0; i < risultati.length; ++i) {
        var risultato = risultati[i];
        $('<div>').html(risultato.modello).appendTo(container);
    }

    if (risultati.length == 0) {
        container.append($('<p>Nessun risultato trovato</p>'));
    }
}

$('.ricerca-prodotti-input').change(function () {
    var form = $('#ricerca-prodotti');

    $.get('motore-ricerca.php', form.serialize(), function (risultati) {
        mostra_risultati(risultati);
    });
});

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>');

        image.appendTo(link);
        link.appendTo(result_container);
        text.appendTo(result_container);
        result_container.appendTo(container);
    }
}
</script>

E in effetti non funziona più nulla.... la pagina è lì ma i selettori non fanno mostrare nulla...

La prima cosa che noto è la modifica fatta da me (però fino a poco fa funzionava):
<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>-</option>
    <option>1</option>
    <option>2</option>
    <option>3</option>
    <option>4</option>
  </datalist>

Forse non va l'opzione - ma quella >0< ... no
Torno alla vecchia versione:

  <label for="tasti">Numero dei tasti:</label>
  <input type="range" name="numero_tasti" class="ricerca-prodotti-input" list="tasti_list" step="1" min="1" max="4">
  <datalist id="tasti_list">
    <option>1</option>
    <option>2</option>
    <option>3</option>
    <option>4</option>
  </datalist>

Niente...
C'è qualcosa nel nuova codice che da fastidio...

Noto che non ho mai levato prima della chiusura dell'Head questo codice

</style>
<script src="http://code.jquery.com/jquery-1.8.0.min.js"></script>
<script>
    $.get('files/telecomandi2.txt', function (file) {
        allTextLines = file.split(/\r\n|\n/);
            $.each(allTextLines, function (elem) {
                var riga = allTextLines[elem].split("|");
                        
                        $('#risultato').append('<option value="' + riga[1] + '">' + riga[0] + '</option>');
            });
    });
</script>

Ma al limite è ininfluente, è il codice per il telecomando random non ha mai dato fastidio...
levo <script src="http://code.jquery.com/jquery-1.8.0.min.js"></script>


Torno alla versione precedente

<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>-</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>
</form>

<h2>Risultati ricerca:</h2>
<div id="risultati-ricerca"></div>

<script src="http://code.jquery.com/jquery-1.8.0.min.js"></script>
<script>
function mostra_risultati(risultati) {
    var container = $('#risultati-ricerca');

    container.empty();
    for (var i = 0; i < risultati.length; ++i) {
        var risultato = risultati[i];
        $('<div>').html(risultato.modello).appendTo(container);
    }

    if (risultati.length == 0) {
        container.append($('<p>Nessun risultato trovato</p>'));
    }
}


$('.ricerca-prodotti-input').change(function () {
    var form = $('#ricerca-prodotti');

    $.get('motore-ricerca.php', form.serialize(), function (risultati) {
        mostra_risultati(risultati);
    });
});
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];
        $('<div>').html(risultato.modello).appendTo(container);
    }
}
</script>

... e funziona...
Cosa mi stona nel tuo codice?

Questa linea... pur non capendola appieno.

      var result_container = $('<div>');

[mzanella]

Ci sono un paio di cose che sicuramente non vanno: hai due div con id risultati-ricerca e due volte la definizione di mostra_risultati. Poi in una riga del codice che ho scritto mancava un + e in un'altra c'era un apostrofo di troppo, classiche sviste... Sistemando:

<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>
</form>

<h2>Risultati ricerca:</h2>
<div id="risultati-ricerca"></div>

<script src="http://code.jquery.com/jquery-1.8.0.min.js"></script>
<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>');

        image.appendTo(link);
        link.appendTo(result_container);
        text.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>

Cosa mi stona nel tuo codice?

Questa linea... pur non capendola appieno.

var result_container = $('<div>');

Quel codice crea semplicemente un <div> nel quale inserire un risultato (immagine e testo), da cui il nome result_container.

[legaitalianalibera]

mzanella
Ci sono un paio di cose che sicuramente non vanno: hai due div con id risultati-ricerca e due volte la definizione di mostra_risultati. Poi in una riga del codice che ho scritto mancava un + e in un'altra c'era un apostrofo di troppo, classiche sviste... Sistemando:

Si, mi sono accorto dei due div e li avevo corretti.
Ho anche levato nuovamente la chiamata alla libreria

<script src="http://code.jquery.com/jquery-1.8.0.min.js"></script>

E torna a non mostrare nulla... (ho rimesso la chiamata alla libreria, provato e levata di nuovo... nulla)

Il PHP è questo
http://veronacitysera.altervista.org...ove-motore.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]  
        ]; 
    } 
} 

header('Content-Type: application/json'); 
echo json_encode($results); 
?>

Il file html questo

<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>
</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>');

        image.appendTo(link);
        link.appendTo(result_container);
        text.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>

Quel codice crea semplicemente un <div> nel quale inserire un risultato (immagine e testo), da cui il nome result_container.

Ecco, e la chiusura del div?

[mzanella]

Resta da cambiare

        var name = risultato.marca + ' ' risultato.modello;

in

        var name = risultato.marca + ' ' + risultato.modello;

Il famoso + mancante .

Ecco, e la chiusura del div?

È inclusa nella creazione dell'elemento. Quando manipoli gli elementi tramite JavaScript/jQuery non lavori con semplici stringhe (che dovresti "aprire" e "chiudere") ma con strutture astratte, ci pensa il linguaggio a produrre i tag corretti.

[legaitalianalibera]

Ma tu fai tutto a mente senza provare mai il codice?
Dov'è che c'era l'apostrofo di troppo? Mi sa che non è stato levato (trad: ancora non va)

[mzanella]

Ma tu fai tutto a mente senza provare mai il codice?

Solitamente sì.


Ecco qua l'apostrofo di troppo

        var link = $('<a>').attr('href', risultato.link');

da cambiare in

        var link = $('<a>').attr('href', risultato.link);