O ASP .NET AJAX nos trouxe um leque de facilidades para deixar nossas aplicações com uma melhor experiência do usuário. E o mais legal de tudo, é que conseguimos agregar mais funcionalidades a ele, alterando seu código fonte e criando uma nova versão da DLL. No meu caso, foi um pouco diferente. Eu precisava fazer com que, conforme a pessoa iria digitando, na lista abaixo, o texto ficasse em negrito, e para isso eu apenas criei um JavaScript, não precisando gerar outra DLL do AJAX. Para entender melhor, veja a imagem abaixo:

Figura 01

Note na Figura 01, que conforme eu vou digitando, o mesmo texto fica em negrito, e é isso que iremos fazer agora.

Vamos supor que você já tenha criado o seu projeto, adicionado o seu controle AutoCompleteExtender, configurado seu Webservice, ou seja, o necessário para que ele funcione corretamente.

Finalizando isso, iremos adicionar a seguinte classe na CSS:

.AutoComplete_ListItemHighlightText {
    font-weight:bold;
}

E depois iremos adicionar os seguintes métodos em “JavaScript”:

function ClientPopulated(source, eventArgs) {

    if (source._currentPrefix != null) {

        var list = source.get_completionList();
        var search = source._currentPrefix.toLowerCase();

        for (var i = 0; i < list.childNodes.length; i++) {

            var text = list.childNodes.innerHTML; 
            var index = RetiraAcentos(text).toLowerCase().
                    indexOf(RetiraAcentos(search).toLowerCase());

            if (index != -1) {

                var value = text.substring(0, index);
                value += '<span class="AutoComplete_ListItemHighLightText">';
                value += text.substr(index, search.length);
                value += '</span>';
                value += text.substring(index + search.length);

                list.childNodes.innerHTML = value;

            }

        }
    
    }

} 

 O método acima aplica a classe AutoComplete_ListItemHighLightText nos itens da lista que contenham o texto procurado.

A função abaixo apenas regulariza o texto, substituindo as letras com acento para as sem acento. Ela é necessária, por que nem sempre os itens listados no AutoComplete estão com acento, ou seja, escritos corretamente. Voltando na Figura 01, podemos perceber que mesmo digitando apenas a palavra “sao”, a função destaca também os “são”, e é graças a esse método que isso acontece.

function RetiraAcentos(txt) {

    var Acentos = "áàãââÁÀÃÂéêÉÊíÍóõôÓÔÕúüÚÜçÇabcdefghijklmnopqrstuvxwyz";
    var Traducao ="AAAAAAAAAEEEEIIOOOOOOUUUUCCABCDEFGHIJKLMNOPQRSTUVXWYZ";
    var Posic, Carac;
    var TempLog = "";
    var value = txt.toUpperCase();

    for (var i=0; i < txt.length; i++) {
        
        Carac = value.charAt(i);
        Posic = Acentos.indexOf(Carac);

        if (Posic > -1)
            TempLog += Traducao.charAt(Posic);
        else
            TempLog += value.charAt(i);
    }

    return TempLog;

}

E essa trata o conteudo selecionado, ou seja, preenche o campo com o item selecionado.

function itemSelected(source, ev) {

    var index = source._selectIndex;
    var dd = source.get_completionList().childNodes[index]._value;
    source.get_element().value = dd;
}

E agora iremos atribuir o método ClientPopulated no evento OnClientPopulated e itemSelected no evento OnClientItemSelected do controle AutoCompleteExtender.

Pronto! Seu controle está mais completo. Agora é esperar que nas futuras versões isso seja agregado ao Framework do ASP .NET AJAX.