Saturday, March 12, 2011

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

2 comments 3/12/2011
Sign up to receive our site updates!
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
Your Ad Here

2 comments:

Anonymous said... [Reply]

Dude you totally ROCK!!!!

Anonymous said... [Reply]

This is totally AWSOME!!!!

Respects for your's Questions & Opinions

  • Friends
  •  

    Recent Posts

    Copyright 2008 All Rights Reserved Tech Tasks Template by Rajesh Kumar Chekuri