Abbiamo di recente sostituito il template di un’applicazione da quello standard a quello fornito dall’estensione Yii Bootstrap, di migliore impatto e con funzionalità molto utili, oltre che accattivanti.
Tra i vari widget disponibili in Bootstrap c’è Typeahead, l’equivalente dell’autocompletamento in Yii. Nel caso l’elenco dei valori disponibili sia predeterminato e fisso la sostituzione è indolore, una leggera complessità si aggiunge nel caso i valori siano da reperire tramite un’azione esterna (ajax).
La sostituzione non è particolarmente difficile ma richiede alcune piccole modfiche al codice.
Partiamo dal widget esistente:
echo ‘<div class=”row”>’;
echo $form1->label($model,’codice_da’);
$this->widget(‘zii.widgets.jui.CJuiAutoComplete’,
array(
‘model’=>$model,
‘attribute’=>’codice_da’,
‘source’=>$this->createUrl(‘card/autocompletaCard’),
‘options’=> array(
‘showAnim’=>’fold’,
),
‘htmlOptions’=>array (
‘style’=>’text-transform: uppercase’,
),
‘cssFile’=>false,
)
);
echo $form1->error($model,’codice_da’);
echo “</div>”;
Come vediamo abbiamo un modello $model con attributo codice_da e l’autocompletamento viene fatto dall’azione autocompletaCard presente nel controller card. Questa funzione deve restituire i risultati in formato JSON.
Il nuovo widget sarà composto come segue:
echo $form1->label($model,’codice_da’);
$this->widget(‘bootstrap.widgets.TbTypeahead’,array(
‘model’=>$model,
‘attribute’=>’codice_da’,
‘options’=> array(
‘source’=>’js:function(query,process){
$.ajax({
url: “‘.$this->createUrl(‘card/autocompletaCard’).'”,
type: “GET”,
dataType:”json”,
data: {term: query},
success: process,
});
}’,
),
‘htmlOptions’=>array (
‘style’=>’text-transform: uppercase’,
),
));
echo $form1->error($model,’codice_da’);
Come vediamo il widget è praticamente simile a quello dell’esempio fornito dalla documentazione dell’estensione, con la variante che il parametro source diventa una funzione anziché un semplice array. La chiave è la chiamata a process che passa il risultato della chiamata al widget per la creazione della tendina.
Per altre informazioni visitate la sezione del nostro blog.
