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>
<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>
7 comments:
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
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.
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.
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;
}
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
max height of AutoComplete
Post a Comment