Thursday, January 13, 2011

In AJAX AutoCompleteExtender TextBox CompletionList Width

Progress Image in AutoComplete TextBox


<head runat="server">
    <title>Progress Image in AutoComplete TextBox</title>
<style>
        .AutoExtender
        {
            font-family: Verdana, Helvetica, sans-serif;
            font-size: .8em;
            font-weight: normal;
            border: solid 1px #006699;
            line-height: 20px;
            padding: 10px;
            background-color: White;
            margin-left:10px;
        }
        .AutoExtenderList
        {
            border-bottom: dotted 1px #006699;
            cursor: pointer;
            color: Maroon;
        }
        .AutoExtenderHighlight
        {
            color: White;
            background-color: #006699;
            cursor: pointer;
        }
        #divwidth
        {
          width: 150px !important;    
        }
        #divwidth div
       {
        width: 150px !important;   
       }
 </style>
</head>

 Put a div with id "divwidth" above the html source of autocomplete extender.

<div ID="divwidth"></div>
and add this line in autocomplete extender HTML source 
CompletionListElementID="divwidth"
The complete html source of AutoComplete Extender 

<asp:TextBox ID="txtAutoComplete" runat="server" Width="252px">
</asp:TextBox>   
<div ID="divwidth"></div>
<ajaxToolkit:AutoCompleteExtender runat="server" 
             ID="AutoComplete1"
             BehaviorID="autoComplete"
             TargetControlID="txtAutoComplete"
             ServicePath="AutoComplete.asmx" 
             ServiceMethod="GetCompletionList"
             MinimumPrefixLength="1" 
             CompletionInterval="10"
             EnableCaching="true"
             CompletionSetCount="12"
             CompletionListCssClass="AutoExtender"
             CompletionListItemCssClass="AutoExtenderList"
             CompletionListHighlightedItemCssClass
             ="AutoExtenderHighlight"
             CompletionListElementID="divwidth">
<ajaxToolkit:AutoCompleteExtender>

No comments:

Post a Comment