Thursday, December 18, 2008

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>

6 comments:

Rama Charan said...

Thanks for fix it helps.

Except a Bug
a) when i have few autocomplete items then it shows a blank box for automplete with few items ( eg when i have only one item for selection)

Suggestion
a)If it was made generic like using a classname or something then it can be re used across multiple autocomplete items in the page.

Thanks a lot for the post once again

Rama Charan said...
This comment has been removed by the author.
Rama Charan said...

One more bug:
when we enter some text and we see some items to select and instead of selecting if we tab out it doesnt show error.

Rama Charan said...

we should use a code to reset selected value when invalid text is selected

OnKeyPress="acTextbox_reset();//write your code here"

Hope this helps someone.

Rama Charan said...

the fix for the issue of

"a) when i have few autocomplete items then it shows a blank box for automplete with few items ( eg when i have only one item for selection)" is using a style with no border.

.autocomplete_completionListElement
{
visibility: hidden;
margin: 0px !important;
background-color: inherit;
color: windowtext;
cursor: 'default';
overflow: auto;
height: 200px;
text-align: left;
list-style-type: none;
font-family: courier new;
font-size: 8pt;
}

Mohit said...

i am filling the autocomplete extender by using pagemethod webmethod den how i can manage this for changing the color to red for wrong entry function pageLoad() {$find('autocomplteextender1')._onMethodComplete = function(result, context) need help,i realy stuck up here