Joomla! - Modulo Search SobiPro con Autocomplete

google-plus Scritto da .

Il presente articolo è stato scritto sulla base di un componente realizzato per Joomla! 2.5.x versione oramai obsoleta del CMS: le informazioni ivi contenute potrebbero non essere aggiornate

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

I commenti lasciati dagli utenti del blog sono sempre soggetti a controllo prima di eventuale pubblicazione. I commenti non considerati adatti per contenuti, spam o forma saranno eliminati e non pubblicati. Leggi i Termini e Condizioni di utilizzo per maggiori informazioni.


Codice di sicurezza
Aggiorna

  • logo teoca
  • materexcel collabora
  • logo flash pulizie
  • revolution srl
  • logo arcotraslochi
  • montaggio mobili trento
  • logo elevatori sito
  • logo prontopro

Prima di andartene...

Perché non rimanere in contatto?

Clicca sul pulsante "Mi piace" qui sotto per rimanere aggiornato su tutti i nuovi contenuti e ricevere notifica degli articoli interessanti che condivido giornalmente sulla Pagina Facebook dedicata al blog.

Puoi anche iscriverti alla newsletter e al nuovo canale YouTube di blog.dangerx82 così da rimanere sempre aggiornato sui nuovi contenuti...

x

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. Ti invitiamo a prendere visione della nostra Informativa sulla Privacy (aggiornata il 25/05/2020). Oppure visiona la nostra Cookie Policy (aggiornata il 17/10/2019):