Joomla! - Modulo Search SobiPro con Autocomplete

google-plus Scritto da . Postato in Joomla!

Nell'ultimo articolo sull'argomento Modulo Search per SobiPro (Sigsiu.net), Ho spiegato come realizzare in Joomla! 2.5 con l'ausilio di un modulo tipo HTML personalizzato,  un modulo di ricerca per SobiPro da inserire nel Front-End.

Mettendomi nuovamente nei panni di un navigatore web che vedesse il modulo su Vivitrentino, mi sono chiesto se lo avrei utilizzato. La risposta? Mancando l'autocomplete sul campo Dove,  probabilmente dopo la prima ricerca lo avrei abbandonato. Ancora una volta il problema è l'immediatezza! Mi fa perdere tempo!

Cercando in Internet, ho trovato nel sito ufficiale jQuery User Interface che nella nuova versione della libreria (1.8), vi è un widget studiato apposta per questo compito: jQuery UI - Autocomplete.
Nella pagina indicata, vi è anche un semplice esempio sotto il link View Source che mostra l'uso del Widget.

Fantastico! Quello che ora serve, è un piccolo ritocco al codice del nostro modulo:

Ed ecco il codice:

<script>
  $(function() {
    var availableTags = [
  "Arco",
  "Canale",
  "Dro",
  "Linfano",
  "Riva del Garda"
//qui posso inserire quante opzioni desidero vengano mostrate sotto la casella di testo durante la digitazione

    ];
    $( "#field_comune" ).autocomplete({
      source: availableTags
    });
  });
  </script>

<
form action="index.php" method="post" id="spSearchForm">

  <div class="ui-widget" 
  <div id="sobisearch">
    <div id="searchWhat" style="float:left;margin:8px;margin-top:13px;">
      <strong class="topHeaders">Cosa</strong><br/>
      <input name="sp_search_for" value="cerca..." class="SPSearchBox" id="SPSearchBox" size="40%" maxlength="60" type="text" />
     <br/><span class="bottomDesc">es. Ristorante</span>
  </div>
  <div id="searchWhere" style="float:left;margin:8px;margin-top:13px;">
      <strong class="topHeaders">Dove</strong><br/>
      <input name="field_comune" class="SPSearchBox" id="field_comune" size="40%" maxlength="60" alt="comune"
          class="inputbox" type="text" value=""  />
<input name="search" value="Cerca" id="top_button" type="submit" />

      <br/><span class="bottomDesc">es. Trento</span>
  </div>
          
<input id="SP_sid" name="sid" value="1" type="hidden">
<input id="SP_task" name="task" value="search.search" type="hidden">
<input id="SP_option" name="option" value="com_sobipro" type="hidden">
  </div>

  </div 
</form>

Il modulo è pronto, è ora di salvarlo. Tuttavia, non è ancora funzionante:

Manca nel tag <head> della nostra pagina il richiamo alle jQuery, e alle jQuery UI 1.8 che sono obbligatorie per il funzionamento del nostro modulo. Questo perché solo l'ultima versione delle jQuery supporta il metodo autocomplete. Pena il mancato funzionamento!

Per richiamarle in maniera semplice e senza complicarci la vita, possiamo utilizzare il plugin jQuery++ Integrator...
Nota: Nella versione 2.5 di Joomla! i richiami alle librerie jQuery possono essere molteplici a seconda dei componenti installati. Per questo motivo e a causa dei conflitti tra le varie versioni questa procedura potrebbe essere inefficace.
...Scaricarlo e installarlo da Gestione estensioni.

Una volta installato, apriamo il plugin dal Back-end da Gestione plugin.
Al suo interno troviamo le impostazioni base, quelle che caricano direttamente dal web le jQuery 1.6.2 e le jQuery 1.8.16. Modifichiamo secondo l'immagine i parametri:

jquery-integrator

Una volta impostati i parametri corretti, abilitiamo il plugin e salviamo.

Ora dovrebbe essere perfettamente funzionante. Andiamo sulla pagina dove abbiamo posizionato il nostro modulo e testiamolo:

input text automplete

Nel prossimo articolo, spiegherò come completare l'autocomplete del modulo, introducendo la chiamata al database per il reperimento dei dati da mostrare...

Se hai gradito l'articolo, condividilo, basta un click!

Aggiungi commento


Codice di sicurezza
Aggiorna

  • logo prontopro
  • logo boutique serramento
  • koilab japan and tropical fish farm
  • Trasloco economico - gruppo Arco Traslochi
  • logo flash pulizie
  • logo revolution
  • logo planetkoi small
  • logo finiture
  • ick logo template
  • montaggio mobili trento

Realizzato da: Daniele Gagliardi
Viale Monache 3 - 38062 Arco - TN
- Contattami -

Per essere più facile ed intuitivo, il blog fa uso dei cookie, piccole porzioni di dati che consentono di capire come gli utenti navighino e ne visualizzino le pagine. I cookie non registrano alcuna informazione personale sull'utente ed eventuali dati identificabili non verranno memorizzati. La nostra Privacy Policy è cambiata: Ti invitiamo a prenderne visione. Oppure visiona la nostra Cookie Policy: