2011-07-26 26 views

答えて

1

は、私はあなたがAJAXツールキットを使用することをお勧めします。

そして、これは私が、たとえば使用する方法である(あなたがあなた自身のCSSクラスを書くことができます)

<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="ajaxToolkit" %> 


    <ajaxToolkit:AutoCompleteExtender runat="server" BehaviorID="AutoCompleteEx" ID="AutoExtend1" 
      TargetControlID="txtPokemonNameSearch" ServicePath="AutoCompleteName.asmx" ServiceMethod="GetCompletionListPokemonName" 
      MinimumPrefixLength="1" CompletionInterval="500" EnableCaching="true" CompletionSetCount="25" 
      CompletionListCssClass="AutoExtender" CompletionListItemCssClass="AutoExtenderList" 
      CompletionListHighlightedItemCssClass="AutoExtenderHighlight" CompletionListElementID="DIVAutoExtender" 
      DelimiterCharacters=";, :" ShowOnlyCurrentWordInCompletionListItem="true"> 
      <Animations> 
       <OnShow> 
        <Sequence> 
         <OpacityAction Opacity="0" /> 
         <HideAction Visible="true" /> 
         <ScriptAction Script=" 
          // Cache the size and setup the initial size 
          var behavior = $find('AutoCompleteEx'); 
          if (!behavior._height) { 
           var target = behavior.get_completionList(); 
           behavior._height = target.offsetHeight - 2; 
           target.style.height = '0px'; 
          }" /> 
                <Parallel Duration=".4"> 
          <FadeIn /> 
          <Length PropertyKey="height" StartValue="0" EndValueScript="$find('AutoCompleteEx')._height" /> 
         </Parallel> 
        </Sequence> 
       </OnShow> 
       <OnHide>    
        <Parallel Duration=".4"> 
         <FadeOut /> 
         <Length PropertyKey="height" StartValueScript="$find('AutoCompleteEx')._height" EndValue="0" /> 
        </Parallel> 
       </OnHide> 
      </Animations> 
     </ajaxToolkit:AutoCompleteExtender>