Wednesday, January 21, 2009

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