How To Display PreFixText In Different Style Of ASP.NET AutoComplete Extender

In this article i am going to show how to display PreFixTest In Different Style.Before going to forward i think you have idea about How to Use AutoComplete Extender, If not check This Article
and in last article i discussed about AutoCompleteExtender with Progress Image



»First Set the Flowing Properties in AutoComplete Extender

BehaviorID="AutoCompleteEx"
OnClientItemSelected="aceSelected"

OnClientPopulated="acePopulated"

»Add The Following JavaScript Functions

<script type="text/javascript">

function aceSelected(sender, e) {

    var value = e.get_value();

    if (!value) {

        if (e._item.parentElement && e._item.parentElement.tagName == "LI")

            value = e._item.parentElement.attributes["_value"].value;

        else if (e._item.parentElement && e._item.parentElement.parentElement.tagName == "LI")

            value = e._item.parentElement.parentElement.attributes["_value"].value;

        else if (e._item.parentNode && e._item.parentNode.tagName == "LI")

            value = e._item.parentNode._value;

        else if (e._item.parentNode && e._item.parentNode.parentNode.tagName == "LI")

            value = e._item.parentNode.parentNode._value;

        else value = "";

    }

    var searchText = $get('<%=txtCity.ClientID %>').value;

    searchText = searchText.replace('null', '');

    sender.get_element().value = searchText + value;

}

  function acePopulated(sender, e) {

    //Give BehaviourId here

    var behavior = $find('AutoCompleteEx');

    var target = behavior.get_completionList();

    if (behavior._currentPrefix != null) {

        var prefix = behavior._currentPrefix.toLowerCase();

        var i;

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

            var sValue = target.childNodes[i].innerHTML.toLowerCase();

            if (sValue.indexOf(prefix) != -1) {

                var fstr = target.childNodes[i].innerHTML.substring(0, sValue.indexOf(prefix));

                var pstr = target.childNodes[i].innerHTML.substring(fstr.length, fstr.length + prefix.length);

                var estr = target.childNodes[i].innerHTML.substring(fstr.length + prefix.length, target.childNodes[i].innerHTML.length);

                target.childNodes[i].innerHTML = "<div class='autocomplete-item'>" + fstr + '<B><font color=red>' + pstr + '</font></B>' + estr + "</div>";

            }

        }

    }

}

         

<script>

»Add your style by changing the following line in 'acePopulated' JS Function

target.childNodes[i].innerHTML = "<div>" + fstr + '<B><font color=red>' + pstr + '</font></B>' + estr + "</div>";<

Happy Coding