Tutti i designer e gli sviluppatori web hanno utilizzato o perlomeno conoscono gli utilissimi widget di jQuery UI. In questo articolo voglio parlarvi di come personalizzare gli stili ed il markup del widget autocomplete, che pur essendo uno dei plugin più completi, presenta un aspetto al quanto obsoleto. Cercheremo in particolare di realizzare un twitter bootstrap 3 autocomplete servendoci del widget di jQuery UI.

 

Aiutami a condividere la risorsa per ottenere il download:

Prima di iniziare

In alcuni progetti, soprattutto per quelli in cui alcune risorse come il tempo o anche il budget del cliente vengono a mancare, può tornare molto utile servirsi di temi twitter bootstrap 3 premium. A tal proposito te ne voglio proporre alcuni di alta qualità che io stesso ho usato per alcuni miei lavori:

Twitter Bootstrap 3 autocomplete: iniziamo!

Cosa includere nel documento

Come prima cosa andremo ad inserire nel nostro documento html le librerie css e javascript necessarie:

CSS:

• bootstrap.css
• demo.css (il nostro foglio di stile)

FILE JS:

• jquery.js (versione 1.10.2)
• jquery-ui.js (per l’autocomplete)
• demo.js (il nostro file javascript)

Per questo esempio ho escluso tutti i file js del Bootstrap e qualunque tema css del jQuery UI, in quanto il nostro intento è quello di combinare appunto gli stili del primo con le funzionalità del secondo; tuttavia è possibile raggiungere l’obiettivo anche includendo le due librerie al completo.

I file “demo.css” e “demo.js” sono rispettivamente il foglio di stile e il javascript del nostro esempio.

Il markup HTML

<div class="row">

	    <div class="col-sm-6 col-md-6 col-md-offset-3">

		    <form id="search-form" role="form">
			  <div class="form-group">
			    <label for="spotlight">Cerca</label>
			    <input type="email" class="form-control" id="spotlight" placeholder="Cerca" />
			  </div>

		    </form>

	    </div>	    

    </div>

 

Aabbiamo usato un input con id “spotlight” all’interno di un form, il tutto contenuto nella colonna di una griglia Bootstrap, con offset 3 e larghezza 6: il risultato è un campo di testo responsive centrato nel mezzo del documento, sia per dispositivi desktop che  mobile.

Javascript: demo.js

$(function() {

    var availableTags = [
      "ActionScript",
      "AppleScript",
      "AppleScript2",
      "AppleScript3",
      "Asp",
      "BASIC",
      "C",
      "C++",
      "Clojure",
      "COBOL",
      "ColdFusion",
      "Erlang",
      "Fortran",
      "Groovy",
      "Haskell",
      "Java",
      "JavaScript",
      "Lisp",
      "Perl",
      "PHP",
      "Python",
      "Ruby",
      "Scala",
      "Scheme"
    ];

    $("#spotlight").autocomplete({
		source: availableTags,
		appendTo: $("form:first")
	});

	$("#spotlight").data( "ui-autocomplete" )._renderMenu = function( ul, items ) {
		var that = this;		
		ul.attr("class", "nav nav-pills nav-stacked");
		$.each( items, function( index, item ) {
			that._renderItemData( ul, item );
		});
	};	    

});

 

Prima di tutto abbiamo definito l’array dei termini possibili di ricerca, poi abbiamo inizializzato il campo con id “spotlight” per l’autocomplete del jQuery UI: qui si noti in particolare come sia stato necessario “appendere” il menù creato dal plugin al form tramite il parametro “appendTo”.

Il passo successivo è stato quello di modificare la funzione “_renderMenu” del plugin, ovvero quella funzione che ha il compito di inserire i vari risultati di ricerca alo’interno del menù sottoforma di entità HTML. Il procedimento è molto semplice: alla funzione vengono passati come parametri l’elemento del menu che sarà appeso al form, e gli elementi del risultato della ricerca in formato JSON. All’interno di un loop si scorrono poi tutti i risultati e viene richiamata la funzione “_renderItemData” che ha il compito di creare per ogni risultato l’elemento HTML e di aggiungerlo alla lista. Prima del loop noi sostituiamo semplicemente la classe del menu del jQuery UI con quelle del Twitter Bootstrap.

Gli stili CSS: demo.css

form#search-form{
  position: relative;
}

form#search-form ul{
	  position: absolute;
	  top: 0;
	  left: 0; 
	  width: 100%;
	  max-height: 200px;
	  overflow: auto;	  
	  z-index: 1;	  
	  border:1px solid #DDDDDD;
	  border-radius: 6px;	  
  }

span.ui-helper-hidden-accessible{
  display: none !important;
}

.ui-state-focus {
	 color: #ffffff;
	 background-color: #428bca;
}

 

Anche per quanto riguarda gli stili il discorso non è molto complicato: per prima cosa attribuiamo il “position:relative” al form, di modo ché il menù dei risultati venga riposizionato in base al primo (è per questo che precedentemente lo abbiamo inserito tramite javascript al suo interno), poi impostiamo gli attributi del menu stesso, il quale avrà quindi una “position:absolute”.

Attribuiamo poi al menù una altezza massima di 200px con overflow:auto per far scorrere i risultati con una scrollbar, evitando di farli uscire dallo schermo, qualora fossero troppo numerosi.

Fatto ciò nascondiamo la classe helper del jQuery UI, ed impostiamo lo stile del risultato della lista su cui scaturisce il focus (questo è un hack necessario perché purtroppo non è possibile modificare con poche righe di codice il markup e le classi di ogni singolo elemento della lista dei risultati. Per questo si è scelto di prendere la strada “più leggera“).

Twitter bootstrap 3 autocomplete: risultato finale

 

Aiutami a condividere la risorsa per ottenere il download:

Temi Twitter Bootstrap 3 premium