Motore di ricerca: altri esempi

Un motore di ricerca può prendere anche altre forme: per esempio, quello di un menu popup. In HTML, un menu è semplicemente una istruzione <select> che contiene una serie di <option>, una per ogni voce. Possiamo creare una pagina mastro tale per cui Sar-At crea la <select> per noi.

Proseguiamo con l'esempio visto nelle pagine precedenti: immaginiamo dunque di aver creato una vista etichettata "elenco_prodotti" che trova tutti i tre membri della sezione "prodotti" e li elenca in ordine alfabetico. Immaginiamo anche di aver definito una vista "motore_ricerca", la quale seleziona i soli record il cui titolo contiene un valore scelto dal visitatore.

Possiamo allora creare il form di ricerca in questo modo. Versione classica:

  <form action="showPage.php" method="post">
        <select name="id">
              <option value='' disabled selected>
                    (Scegli il prodotto che ti interessa)
              </option>
              {BEGIN elenco_prodotti}
              <option value="{id}">
                    {title}
              </option>
              {END elenco_prodotti}
        </select>
        <input type="hidden" name="template" value="prodotti">
        <input type="submit" value="Vai">
  </form>

Versione Twig:

  <form action="showTwig.php" method="post">
        <select name="id">
              <option value='' disabled selected>
                    (Scegli il prodotto che ti interessa)
              </option>
              {% for unProdotto in elenco_prodotti %}
              <option value="{{ unProdotto.id }}">
                    {{ unProdotto.title }}
              </option>
              {% endfor %}
        </select>
        <input type="hidden" name="template" value="prodotti">
        <input type="submit" value="Vai">
  </form>

Ecco il risultato HTML:

  <form action="showPage.php" method="post">
        <select name="id">
              <option value='' disabled selected>
                    (Scegli il prodotto che ti interessa)
              </option>
               
              <option value="103">
                    Biscotti al cioccolato
              </option>
               
              <option value="101">
                    Torta al cioccolato
              </option>
               
              <option value="102">
                    Yogurt al cioccolato
              </option>
        </select>
        <input type="hidden" name="template" value="prodotti">
        <input type="submit" value="Vai">
  </form>

A video apparirà così:

La pagina "risultati della ricerca" non va affatto cambiata rispetto all'esempio visto sopra.