Antonio "tdj"

(C'è sempre un modo migliore)
posts - 312, comments - 268, trackbacks - 17

My Links

News





Tag Cloud

Article Categories

Archives

Post Categories

Image Galleries

Articoli

Blogs

Controlli WinForm free

Guide

Siti vari

Sviluppo

jQuery Autocomplete in ASP.NET MVC: personalizzazione del layout

Continuiamo il nostro mini tutorial sul controllo jQuery Autocomplete concentrandoci su una funzionalità piuttosto utile in controlli di questo tipo ovvero evidenziare in temporeale le parole che l’utente digita nella lista filtrata (un po’ come avviene in Facebook quando cerchiamo un utente).

Il controllo purtroppo non espone nessun evento utile per implementare questo meccanismo, infatti sono esposti solo pochi eventi come select, focus o change che non sono molto utili allo scopo. Infatti servirebbe un evento scatenato al render di ogni item per consentirci di personalizzarne l’aspetto.

L’evento esposto non ce l’abbiamo ma esiste un metodo che si occupa del render degli item chiamato _renderItem che è possibile sovrascrivere. Dunauq, abbiamo tutto il necessario per applicare uno stile specifico per evidenziare il testo cercato.

Il primo passo è cercare all’interno di ciascun item la porzione di testo digitata dall’utente e questo possiamo farlo durante la creazione del datasource del controllo:

$('#term').autocomplete({
// ...      
      $.ajax({
            url: '<%=Url.Action("Search") %>/' + t,
            dataType: "json",
            data: "",
            contentType: "application/json; charset=utf-8",
            success: function (data) {
                            response($.map(data, function (e, i) {
                                return {
                                    CustomerID: e.CustomerID,
                                    label: e.CompanyName.replace(new RegExp('('+t+')'), "gi"), "<strong>$1</strong>"),
                                    City: e.City
                                };
                            })
                        );
            }
        });
// ...
});


Il tutto si riduce nell’applicare una semplice regular expression basata sulla variabile “t” che contiene il testo digitato dall’utente. Tutte le occorrente vengono sostituite con il corrispondente valore decorato, però, con il tag <strong>.

Il secondo passo è applicare questo testo nell’item facendo l’override del metodo _renderItem del controllo:

$('#term').autocomplete({
   // ...

}).data("autocomplete")._renderItem = function (ul, item) {
               return $("<li></li>")
                         .data("item.autocomplete", item)
                         .append("<a>" + item.label + "</a>")
                         .appendTo(ul);
                };


Banalmente viene ricostruito l’item basato sul tag <li>. Questo è necessario perchè normalmente al testo degli item viene applicato l’encoding html quindi eventuali tag html non sono interpretati.

Eseguendo l’applicazione, il risultato è questo:

13.live-hightlight

 

Con questa tecnica incappiamo, però, in un piccolo problema: quando selezioniamo un item, nella text box vediamo il testo html con l’encoding applicato:

14.html-encoding

Questo succede perchè abbiamo applicato lo stile dell’item nel data source, pertanto è sufficiente spostare questa operazione durante il rendere dell’tem. Il codice modificato è il seguente:

$('#term').autocomplete({
   // ...

}).data("autocomplete")._renderItem = function (ul, item) {
               return $("<li></li>")
                         .data("item.autocomplete", item)
                         .append("<a>" + item.label.replace(new RegExp('(' + $('#term').val() + ')', "gi"), "<strong>$1</strong>") + "</a>")
                         .appendTo(ul);
                };


Personalizzazione della lista
Forte di quanto scritto fino ad ora, è evidente che personalizzare la lista degli elementi diventa piuttosto semplice. Supponendo di voler visualizzare il codice del cliente, oltre alla ragione sociale, non dobbiamo fare altro che modificare il metodo _renderItem:

$('#term').autocomplete({
   // ...

}).data("autocomplete")._renderItem = function (ul, item) {
               var itemLabel = item.label.replace(new RegExp('(' + $('#term').val() + ')', "gi"), "<strong>$1</strong>") +
                                 " [" + item.CustomerID + "]";
               return $("<li></li>")
                         .data("item.autocomplete", item)
                         .append("<a>" + itemLabel + "</a>")
                         .appendTo(ul);
                };


il cui risultato è il seguente:

15.custom-item


Concludiamo questo mini tutorial con un ultima modifica: l’aggiunta di un feedback grafico per notificare all’utente che è in corso la ricerca dei dati. Il controllo Autocomplete supporta questa opzione semplicemente impostando una classe CSS chiamata ui-autocomplete-loading:

<style type="text/css">
      .ui-autocomplete-loading
       {
         background: #fff url('/content/loading.gif') right center no-repeat;
       }
</style>

 

che prevede la visualizzazione dell’immagine nella text box durante il recupero dei dati lato server, come mostrato di seguito:

15.custom-item-loading

 

E’ tutto!
Concludo con un appunto finale: questo esempio è applicabile senza grossi problemi anche in applicazioni Web Form. L’unica differenza è nello scegliere il metodo di recupero dei dati lato server che può essere fatto costruendo un HttpHandler, una pagina .aspx o un web service che restituiscono i dati in formato Json.


Print | posted on mercoledì 2 febbraio 2011 00:18 | Filed Under [ Asp.net jquery ]

Comments have been closed on this topic.

Powered by:
Powered By Subtext Powered By ASP.NET