Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>1) Assign <code>runat="server"</code> to the datalist so that it can be accessed from code behind:</p> <pre><code>Enter your favorite browser name:&lt;br /&gt; &lt;input id="browserName" list="browsers" /&gt; &lt;datalist id="browsers" runat="server" /&gt; </code></pre> <p>2) Loop through the <code>DataTable</code>, construct and concatenate a list of options using a <code>StringBuilder</code> and add the result to the <code>InnerHtml</code> property of the datalist </p> <pre><code> protected void Page_Load(object sender, EventArgs e) { DataTable table = new DataTable(); table.Columns.Add("BrowserName"); table.Rows.Add("IE"); table.Rows.Add("Chrome"); table.Rows.Add("Firefox"); table.Rows.Add("Opera"); table.Rows.Add("Safari"); var builder = new System.Text.StringBuilder(); for (int i = 0; i &lt; table.Rows.Count; i++) builder.Append(String.Format("&lt;option value='{0}'&gt;",table.Rows[i][0])); browsers.InnerHtml = builder.ToString(); } </code></pre> <p>If you're going to need this functionality in multiple places in your site, you can either <a href="http://www.codeproject.com/Articles/132809/Calling-WCF-Services-using-jQuery">create a WCF service and call it via jQuery</a> where you can populate the datalist or create an HTTP handler like this:</p> <p>1)Add a Generic Handler to your project and call it AutoCompleteHandler.ashx</p> <p>2)Inside AutoCompleteHandler.ashx put:</p> <pre><code>public class AutoCompleteHandler : IHttpHandler { public void ProcessRequest(HttpContext context) { context.Response.ContentType = "text/plain"; context.Response.Clear(); var options = new System.Text.StringBuilder(); options.Append("&lt;option value='IE'&gt;"); options.Append("&lt;option value='Chrome'&gt;"); options.Append("&lt;option value='Firefox'&gt;"); options.Append("&lt;option value='Safari'&gt;"); options.Append("&lt;option value='Opera'&gt;"); context.Response.Write(options.ToString()); context.Response.End(); } public bool IsReusable { get{return false;} } } </code></pre> <p>3)Call the handler via jQuery when the page loads and populate the datalist with the returned result:</p> <pre><code>&lt;script src="Scripts/jquery-1.9.1.js" type="text/javascript"&gt;&lt;/script&gt; &lt;script type="text/javascript"&gt; $(document).ready(function () { $.post('AutoCompleteHandler.ashx', function (data) { $('#browsers').html(data); }); }); &lt;/script&gt; </code></pre>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. VO
      singulars
      1. This table or related slice is empty.
    2. VO
      singulars
      1. This table or related slice is empty.
    3. VO
      singulars
      1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload