Ajax: AutoCompleteExtender

Eksempel på bruk av AutoCompleteExtender fra AjaxControlToolkit:

 

Husk updatepanel og scriptmanager på siden.

 

ASPX:

 

 

<div style="float: left; background-color: Wheat;" id="info" runat="server" enableviewstate="false" >

            <p style="padding: 10px;">

            Du kan bruke denne tekstboksen til å finne rådgivernummer.<br />

            Skriv inn starten på rådgivers navn (minst tre tegn) for å søke:<br />

           

            <asp:TextBox ID="TextBox1" runat="server" Width="320"></asp:TextBox>

            <cc1:AutoCompleteExtender ID="AutoCompleteExtender1" runat="server" TargetControlID="TextBox1"

                        ServiceMethod="FinnRadgivereListe" MinimumPrefixLength="3" CompletionInterval="1000"

                        EnableCaching="true" CompletionSetCount="20"

                        CompletionListCssClass="autocomplete_completionListElement"

                        CompletionListItemCssClass="autocomplete_listItem"

                        CompletionListHighlightedItemCssClass="autocomplete_highlightedListItem"

                        >

            </cc1:AutoCompleteExtender>    

           

            </p>

</div>

<cc1:RoundedCornersExtender BorderColor="Yellow" Radius="15" ID="round1" TargetControlID="info" runat="server">

            </cc1:RoundedCornersExtender>

 

 

 

ASPX.CS:

 

    [WebMethod]

    [ScriptMethod]

    public static string[] FinnRadgivereListe(string prefixText, int count)

    {

        string[] liste=null;

        try

        {

            liste=Kontroller.FinnRadgivere(Convert.ToInt32(Kontroller.HentRadgiverNr()), prefixText, count);

        }

        catch

        {

        }

        return liste;

 

    }

      

 

 

 

 

CSS:

 

.autocomplete_completionListElement

{

            visibility : hidden;

            margin : 0px!important;

            background-color : inherit;

            color : windowtext;

            border : buttonshadow;

            border-width : 1px;

            border-style : solid;

            cursor : 'default';

            overflow : auto;          

    text-align : left;

    list-style-type : none;

 

}

 .autocomplete_listItem

 {

            background-color : window;

            color : windowtext;

            padding : 1px;

 

 }

 .autocomplete_highlightedListItem

 {

            background-color: #ffff99;

            color: black;

            padding: 1px;

 

 }