Romny Duarte

   1: [WebMethod]

   2:     public string[] GetProducts(string prefixText, int count)

   3:     {

   4:         List<string> items = new List<string>(count);

   5:         DataSet ds = new DataSet();

   6:  

   7:  

   8:         string connectionString = "Data Source=localhost;Persist Security Info=True;Integrated Security=SSPI;Initial Catalog=AdventureWorksLT;";

   9:         using (SqlConnection connection = new SqlConnection(connectionString))

  10:         {

  11:             string sql = "SELECT * FROM SalesLT.Product WHERE Color LIKE '" + prefixText + "%'";

  12:             SqlDataAdapter adapter = new SqlDataAdapter();

  13:             adapter.SelectCommand = new SqlCommand(sql, connection);

  14:             adapter.Fill(ds);

  15:         }

  16:  

  17:         foreach (DataRow dr in ds.Tables[0].Rows)

  18:         {

  19:             items.Add(dr["Name"].ToString() + "|" + dr["Color"].ToString() + "|");

  20:             //items.SetValue(dr["TAR_Codigo"].ToString() + "\t" + dr["TAR_Tipo"].ToString());

  21:  

  22:         }

  23:  

  24:         return items.ToArray();

  25:     }

   1: <asp:TextBox ID="txtProducts" runat="server" Height="21px" Width="334px"></asp:TextBox>

   2:     

   3:     <cc1:AutoCompleteExtender runat="server" 

   4:     BehaviorID="AutoCompleteEx" 

   5:     ID="e_Products" TargetControlID="txtProducts" ServicePath="AutoCompleteRows.asmx" OnClientPopulated="selectItem"     

   6:     ServiceMethod="GetProducts" MinimumPrefixLength="2" CompletionInterval="1000" 

   7:     EnableCaching="true" CompletionSetCount="8" 

   8:     CompletionListCssClass="autocomplete_completionListElement" 

   9:     CompletionListItemCssClass="autocomplete_listItem" 

  10:     CompletionListHighlightedItemCssClass="autocomplete_highlightedListItem"> 

  11:     <Animations>

  12:                     <OnShow>

  13:                         <Sequence>

  14:                             <%
   1: -- Make the completion list transparent and then show it --
%>

  15:                             <OpacityAction Opacity="0" />

  16:                             <HideAction Visible="true" />

  17:                             

  18:                             <%
   1: --Cache the original size of the completion list the first time
   2:                                 the animation is played and then set it to zero --
%>

  19:                             

  20:                             <ScriptAction Script=" />

  21:                                 // Cache the size and setup the initial size

  22:                                 var behavior = $find('AutoCompleteEx');

  23:                                 if (!behavior._height) {

  24:                                     var target = behavior.get_completionList();

  25:                                     behavior._height = target.offsetHeight - 2;

  26:                                     target.style.height = '0px';

  27:                                 }"

  28:                             

  29:                             <%
   1: -- Expand from 0px to the appropriate size while fading in --
%>

  30:                             

  31:                             <Parallel Duration=".4">

  32:                                 <FadeIn />

  33:                                 <Length PropertyKey="height" StartValue="0" EndValueScript="$find('AutoCompleteEx')._height" />

  34:                             </Parallel>

  35:                         </Sequence>

  36:                     </OnShow>

  37:                     <OnHide>

  38:                         <%
   1: -- Collapse down to 0px and fade out --
%>

  39:                         

  40:                         <Parallel Duration=".4">

  41:                             <FadeOut />

  42:                             <Length PropertyKey="height" StartValueScript="$find('AutoCompleteEx')._height" EndValue="0" />

  43:                         </Parallel>

  44:                     </OnHide>

  45:                 </Animations>

  46:     </cc1:AutoCompleteExtender>

   1: <script type="text/javascript">

   2:     function selectItem() {

   3:         var comletionList = $find("AutoCompleteEx").get_completionList();

   4:         for (i = 0; i < comletionList.childNodes.length; i++) {

   5:             var _value = comletionList.childNodes[i]._value;

   6:             comletionList.childNodes[i]._value = _value.substring(_value.lastIndexOf('|') + 1); 

   7:             _value = _value.substring(0, _value.lastIndexOf('|'));

   8:             comletionList.childNodes[i].innerHTML = _value.replace('|', '<br/>');

   9:         }

  10:     }