Custom AutoComplete 5: Build an additional row on the top of AutoComplete List

Before anything, please check this(http://www.globrix.com/):



We know we can customize AutoComplete. In this image, we can achieve the red background, Font style and seting some shining picture as the background. But one thing we need to notice is that there is an arrowhead on the top of row. So we have to make an additional row for it. And this row is not an item in the list; mouse event should be unavailable here.

Let code speak anything:

In this sample, you can define autocomplete_firstRow css style. In this case, you can define a background image in firstrow.

.autocomplete_firstrow
{
background-color:Red;
height:20px;


}

After you create an AutoComplete on the page, the below JavaScript will be worked of it. It will create an addition row on the top of AutoComplete. Suppose that the behaviorID of AutoComplete is "AutoCompleteEx".

<script type="text/javascript">


        function ClientPopulated() {
            var comletionList = $find("AutoCompleteEx").get_completionList();
           



            var firstrow=document.createElement("div");
            firstrow.id="firstrow";
            firstrow.className = "autocomplete_firstrow";

            comletionList.insertBefore(firstrow, comletionList.firstChild);
  



        }

       

        function pageLoad() {
            var autoc = $find("AutoCompleteEx");
//redefine highlightitem function
            autoc._highlightItem = function(item) {

                var children = autoc._completionListElement.childNodes;
                if (item === children[0])
                    return;

                for (var i = 0; i < children.length; i++) {
                    var child = children[i];
                    if (child._highlighted) {
                        if (autoc._completionListItemCssClass) {
                            Sys.UI.DomElement.removeCssClass(child, autoc._highlightedItemCssClass);
                            Sys.UI.DomElement.addCssClass(child, autoc._completionListItemCssClass);
                        } else {
                            if (Sys.Browser.agent === Sys.Browser.Safari) {
                                child.style.backgroundColor = 'white';
                                child.style.color = 'black';
                            } else {
                                child.style.backgroundColor = autoc._textBackground;
                                child.style.color = autoc._textColor;
                            }
                        }
                        autoc.raiseItemOut(new AjaxControlToolkit.AutoCompleteItemEventArgs(child, child.firstChild.nodeValue, child._value));
                    }
                }

                // Highlight the new item
                if (this._highlightedItemCssClass) {
                    Sys.UI.DomElement.removeCssClass(item, this._completionListItemCssClass);
                    Sys.UI.DomElement.addCssClass(item, this._highlightedItemCssClass);
                } else {
                    if (Sys.Browser.agent === Sys.Browser.Safari) {
                        item.style.backgroundColor = 'lemonchiffon';
                    } else {
                        item.style.backgroundColor = 'highlight';
                        item.style.color = 'highlighttext';
                    }

                }
                item._highlighted = true;

                this.raiseItemOver(new AjaxControlToolkit.AutoCompleteItemEventArgs(item, item.firstChild.nodeValue, item._value));


            };

//redefine settext function
            autoc._setText = function(item) {
            var children = autoc._completionListElement.childNodes;
                if (item === children[0])
                    return;
                var text = (item && item.firstChild) ? item.firstChild.nodeValue : null;

                autoc._timer.set_enabled(false);

                var element = autoc.get_element();
                var control = element.control;
                if (control && control.set_text) {
                    control.set_text(text);
                    $common.tryFireEvent(control, "change");
                }
                else {
                    element.value = text;
                    $common.tryFireEvent(element, "change");
                }
                autoc.raiseItemSelected(new AjaxControlToolkit.AutoCompleteItemEventArgs(item, text, item ? item._value : null));

                autoc._currentPrefix = autoc._currentCompletionWord();
                autoc._hideCompletionList();
            };

      }
       


    </script>

Custom AutoComplete 6: MultiColumn Autocomplete(Mutiple columns message for each Item)

Hello all, I made "Mutiple rows message for each Item" several months ago. Now I'd like to build a MultiColumn Autocomplete. They applies same principle, so it's not a trouble if you checked previous post.

Here is the code in aspx:

<head runat="server">
    <title></title>
    <link href="../Default.css" rel="stylesheet" type="text/css" />
    <style>
    .cloumnspan
    {
        width:35px;
        padding:0px;
        border-color:Black;
        border-style:solid;
        border-width:1px;

    }
   
    </style>
</head>
<body>
    <form id="form1"  runat="server">
        <ajaxToolkit:ToolkitScriptManager runat="server" ID="ScriptManager1" />

           <asp:TextBox runat="server" ID="myTextBox" Width="300" autocomplete="off" />
            <ajaxToolkit:AutoCompleteExtender
                runat="server"  OnClientPopulated="dd" OnClientItemSelected="itemSelected"
                BehaviorID="AutoCompleteEx"
                ID="autoComplete1"
                TargetControlID="myTextBox"
                ServicePath="AutoComplete.asmx"
                ServiceMethod="GetCompletionList5"
                MinimumPrefixLength="2"
                CompletionInterval="1000"
                EnableCaching="true"
                CompletionSetCount="8"
                CompletionListCssClass="autocomplete_completionListElement"
                CompletionListItemCssClass="autocomplete_listItem"
                CompletionListHighlightedItemCssClass="autocomplete_highlightedListItem"
                DelimiterCharacters=";, :">
            </ajaxToolkit:AutoCompleteExtender>

    </form>
    <script type="text/javascript">
function itemSelected(ev)
{
    var index=$find("AutoCompleteEx")._selectIndex;
    var value=$find("AutoCompleteEx").get_completionList().childNodes[index]._value;
    $find("AutoCompleteEx").get_element().value = value;
}
function dd()
{
    var comletionList=$find("AutoCompleteEx").get_completionList();
    for(i=0;i<comletionList.childNodes.length;i++) {
        var itemobj=new Object();
        var _data = comletionList.childNodes[i]._value;
        itemobj.name= _data.substring(_data.lastIndexOf('|') + 1); // parse name as item value
        comletionList.childNodes[i]._value = itemobj.name;
        _data = _data.substring(0, _data.lastIndexOf('|'));
        itemobj.age = _data.substring(_data.lastIndexOf('|') + 1);
        _data = _data.substring(0, _data.lastIndexOf('|'));
        itemobj.id = _data.substring(_data.lastIndexOf('|') + 1);


        comletionList.childNodes[i].innerHTML = "<div class='cloumnspan' style='width:10%;float:left'>" + itemobj.id + "</div>"
                                              + "<div class='cloumnspan' style='width:70%;float:left'>" + itemobj.name + "</div>"
                                              + "<div class='cloumnspan' style='width:18%;'>" + itemobj.age + "</div>";

    }
   
}



</script>
</body>

Web Method:

[WebMethod]
public string[] GetCompletionList5(string prefixText, int count)
{

    if (count == 0)
    {
        count = 10;
    }

    if (prefixText.Equals("xyz"))
    {
        return new string[0];
    }

    Random random = new Random();
    List<string> items = new List<string>(count);

    for (int i = 0; i < count; i++)
    {

        char c1 = (char)random.Next(65, 90);
        char c2 = (char)random.Next(97, 122);
        char c3 = (char)random.Next(97, 122);
        int id = i;
        int age = random.Next(18, 70);
        items.Add(id.ToString() + "|" + age.ToString() + "|" + prefixText + c1 + c2 + c3);
    }

    return items.ToArray();
}

If you want to add a header for MutiColumn table, you should add an additional row/div at the top of complete list. Please check this: http://vincexu.blogspot.com/2009/01/custom-autocomplete-5-build-additional.html

Custom AutoComplete 4: Build an UpdateProgress for AutoComplete

I have introduced some kinds of Custom AutoComplete. Again, there is an another one -- Build an UpdateProgress for AutoComplete.

Check the code directly:

<head runat="server">
    <title>Untitled Page</title>
    <style>
        .autocomplete_completionListElement
        {
            visibility: hidden;
            margin: 0px !important;
            background-color: inherit;
            color: windowtext;
            border: buttonshadow;
            border-width: 1px;
            border-style: solid;
            cursor: 'default';
            overflow: auto;
            height: 200px;
            text-align: left;
            list-style-type: none;
            font-family: courier new;
            font-size: 8pt;
        }
        /* AutoComplete highlighted item */.autocomplete_highlightedListItem
        {
            background-color: #e3ec6e;
            color: black;
            padding: 1px;
        }
        /* AutoComplete item */.autocomplete_listItem
        {
            background-color: window;
            color: windowtext;
            padding: 1px;
        }
        body, div, p, h1, h2, h3, h4, ul, li, table
        {
            margin: 0;
            padding: 0;
            border: none;
        }
    </style>
</head>

<script type="text/javascript">
    function pageLoad() {
        $find('autocomplteextender1').add_populated(shownev); //if no result, this event will not be triggered and "loading" can't be hidden. But if result is exist, hiding event will be triggered when the user selects value to hide popuplist.So we need populated event to hide "loading" when the result is not empty.

        $find('autocomplteextender1').add_populating(populatingev);
        $find('autocomplteextender1').add_hiding(onhiding); // no matter the result is empty or not, hiding event will be triggered. If the result is empty, it will trigger hiding event after response returned. If the result is exist, hiding event will be triggered after user selected value to hide popuplist.
    }
    function onhiding() {

        var updateProgress = $get('<%= UpdateProgress2.ClientID %>');
        var dynamicLayout = '<%= UpdateProgress2.DynamicLayout.ToString().ToLower() %>';

        if (dynamicLayout) {
            updateProgress.style.display = "none";
        }
        else {
            updateProgress.style.visibility = "hidden";
        }
    }
    function shownev() {
        var updateProgress = $get('<%= UpdateProgress2.ClientID %>');
        var dynamicLayout = '<%= UpdateProgress2.DynamicLayout.ToString().ToLower() %>';

        if (dynamicLayout) {
            updateProgress.style.display = "none";
        }
        else {
            updateProgress.style.visibility = "hidden";
        }

    }
    function populatingev() {
        var updateProgress = $get('<%= UpdateProgress2.ClientID %>');
        var dynamicLayout = '<%= UpdateProgress2.DynamicLayout.ToString().ToLower() %>';

        if (dynamicLayout) {
            updateProgress.style.display = "block";
        }
        else {
            updateProgress.style.visibility = "visible";
        }


    }

</script>

<body>
    <form id="form2" runat="server">
    <asp:ScriptManager ID="ScriptManager2" runat="server" />
    <asp:UpdateProgress ID="UpdateProgress2" runat="server">
        <ProgressTemplate>
            loading...
        </ProgressTemplate>
    </asp:UpdateProgress>   
    <asp:TextBox ID="TextBox1" runat="server" Width="437px"></asp:TextBox>
    <cc1:AutoCompleteExtender ID="AutoCompleteExtender1" runat="server" BehaviorID="autocomplteextender1"
        MinimumPrefixLength="1" ServicePath="AutoComplete.asmx" ServiceMethod="GetCompletionList1"
        TargetControlID="TextBox1" CompletionListCssClass="autocomplete_completionListElement"
        CompletionListItemCssClass="autocomplete_listItem" CompletionListHighlightedItemCssClass="autocomplete_highlightedListItem"
        CompletionInterval="1000" DelimiterCharacters=";" CompletionSetCount="10" FirstRowSelected="true"
        EnableCaching="true" Enabled="true">
    </cc1:AutoCompleteExtender>

    </form>
</body>

Custom AutoComplete 3: Check if AutoComplete List has result items

This kide of requirement I encountered many times.
When the prefixText the user inputed didn't cause any result items from AutoComplete, we need generate an alert for it. For example, the background of TextBox should become red if empty result occurs. See the below thumbnail.



When I'm during the process of typing "mary", the result of web method will be returned. After I type additional "x", the result is empty as "maryx" is not exist. Then the background becomes red.

We need rebuild the onMethodComplete function to attach a callback function after results are updated so that we can generate the alert meassage. Now we can see the code:

<head runat="server">
    <title></title>
    <style>
        .autocomplete_completionListElement
        {
            visibility: hidden;
            margin: 0px !important;
            background-color: inherit;
            color: windowtext;
            border: buttonshadow;
            border-width: 1px;
            border-style: solid;
            cursor: 'default';
            overflow: auto;
            height: 200px;
            text-align: left;
            list-style-type: none;
            font-family: courier new;
            font-size: 8pt;
        }
        /* AutoComplete highlighted item */.autocomplete_highlightedListItem
        {
            background-color: #e3ec6e;
            color: black;
            padding: 1px;
        }
        /* AutoComplete item */.autocomplete_listItem
        {
            background-color: window;
            color: windowtext;
            padding: 1px;
        }

    </style>
</head>

<script type="text/javascript">
    function pageLoad() {

        $find('autocomplteextender1')._onMethodComplete = function(result, context) {

            $find('autocomplteextender1')._update(context, result, /* cacheResults */false);
            webservice_callback(result, context);
        };

    }
    function webservice_callback(result, context) {

        if (result == "")
            $find("autocomplteextender1").get_element().style.backgroundColor = "red";
        else
            $find("autocomplteextender1").get_element().style.backgroundColor = "white";
    }

</script>

<body>
    <form id="form2" runat="server">
    <asp:ScriptManager ID="ScriptManager2" runat="server" />
    <asp:UpdatePanel ID="uppanle1abcxyz" runat="server">
        <ContentTemplate>
            <asp:TextBox ID="TextBox1" runat="server" Width="150px"></asp:TextBox>
            <cc1:AutoCompleteExtender ID="AutoCompleteExtender1" runat="server" BehaviorID="autocomplteextender1"
                MinimumPrefixLength="1" ServicePath="AutoComplete.asmx" ServiceMethod="GetCompletionList1"
                TargetControlID="TextBox1" CompletionListCssClass="autocomplete_completionListElement"
                CompletionListItemCssClass="autocomplete_listItem" CompletionListHighlightedItemCssClass="autocomplete_highlightedListItem"
                CompletionInterval="500" DelimiterCharacters=";" CompletionSetCount="10" Enabled="true">
            </cc1:AutoCompleteExtender>
        </ContentTemplate>
    </asp:UpdatePanel>
    </form>
</body>