Hi,
I am using an AJAX AutoCompleteExtender to display a list of suburbs-postcodes after the user presses 3 keys in the given textbox.
The problem is that on the page, I can't move my selection below the first item (with down arrow key/mouse). However with mouse if I click on any item, it gets selected.
<asp:TextBox ID="txtPostalSuburb" runat="server" CssClass="select_insert_menu_text1" MaxLength="40" TabIndex="9"></asp:TextBox>
<cc1:AutoCompleteExtender ID="txtPostalSuburb_AutoCompleteExtender" runat="server" DelimiterCharacters="" Enabled="True" ServicePath="~/Web/Common/ListingService.asmx" TargetControlID="txtPostalSuburb" UseContextKey="False" ServiceMethod="GetSuburbList" MinimumPrefixLength="3" CompletionListCssClass="contact-details-suggestion-list" OnClientItemSelected="AutoCompleteExtender_ItemSelected" CompletionListItemCssClass="contact-details-suggestion-list-item" > </cc1:AutoCompleteExtender>
CSS:
.contact-details-suggestion-list
{
background-color: window;
color: windowtext;
cursor: default;
list-style-image: none;
list-style-position: outside;
list-style-type: none;
padding:0px;
text-align: left;
border: solid 1px #005883;
margin-top: 0px;
font-size: 10px;
}
.contact-details-suggestion-list-item
{
border-bottom: dotted 1px black;
}
Any help is appreciated.
Thanks