title: Ajax AutoComplete in the form form of gridview
body: <p>I'm having a textbox with ajax autocomplete extender</p>
  
  <p>I'm extending TextBox1 with Ajax AutoComplete Extender and populating it with the help of WebService.</p>
  
  <p>My requirement is that instead of a dropdown suggestion I should get a GridView like structure
  with multiple columns with headers. I am using asp.net and ajaxcontrol toolkit</p>
  
  <p>How can I achieve this?</p>
  
  <p>Any help or suggestion.</p>
  
  <pre><code>public partial class AutoComplete : System.Web.UI.Page
  {
      protected void Page_Load(object sender, EventArgs e)
      {
  
      }
  
  
   [System.Web.Script.Services.ScriptMethod()]
   [System.Web.Services.WebMethod]
  public static List&lt;string&gt; GetNames(string prefixText)
      {
          SqlConnection con = new SqlConnection(ConfigurationManager.ConnectionStrings["GridConnection"].ToString());
          con.Open();
          SqlCommand cmd = new SqlCommand("select TOP 15 Name,Address,Grade from StudentDet where Name like @name+'%'", con);
          cmd.Parameters.AddWithValue("@name", prefixText);
          SqlDataAdapter da = new SqlDataAdapter(cmd);
          DataTable dt = new DataTable();
          da.Fill(dt);
          List&lt;string&gt; ItemCodes = new List&lt;string&gt;();
          for (int i = 0; i &lt; dt.Rows.Count; i++)
          {
              ItemCodes.Add(dt.Rows[i][0].ToString()+""+dt.Rows[i][1].ToString()+" "+dt.Rows[i][2].ToString());
          }
          return ItemCodes;
  </code></pre>
  
  <p>Markup is as follows</p>
  
  <pre><code>&lt;asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server"&gt;
  
  &lt;script type="text/javascript" language="javascript"&gt;
  function onListPopulated() {
  
      var completionList = $find("AutoCompleteEx").get_completionList();
      completionList.style.width = 'auto';
  }
  &lt;/script&gt;
  &lt;/asp:Content&gt;
  &lt;asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server"&gt;
  &lt;p&gt;
  &lt;br /&gt;
  &lt;asp:TextBox ID="txtAutoCmplte" runat="server"&gt;&lt;/asp:TextBox&gt;
  &lt;asp:AutoCompleteExtender ID="txtAutoCmplte_AutoCompleteExtender" 
      runat="server" CompletionInterval="1" ServiceMethod="GetNames" 
      TargetControlID="txtAutoCmplte" 
          CompletionListCssClass="autocomplete_completionListElement" 
          MinimumPrefixLength="1" BehaviorID="AutoCompleteEx" 
          onclientpopulated="onListPopulated"&gt;
  &lt;/asp:AutoCompleteExtender&gt;
  &lt;asp:ScriptManager ID="ScriptManager1" runat="server"&gt;
  &lt;/asp:ScriptManager&gt;
  &lt;/p&gt;
  &lt;p&gt;
  &lt;/p&gt;
  &lt;/asp:Content&gt;
      }
  }
  </code></pre>
  
  <p>CSS is as follows</p>
  
  <pre><code>.autocomplete_completionListElement 
  {   
      width:500px;
      margin : 0px!important;
      background-color : inherit;
      color : windowtext;
      border : buttonshadow;
      border-width : 1px;
      border-style : solid;
      overflow :auto;
      height : 200px;
      text-align : left; 
  }
  </code></pre>