html5 input list items not shown in dropdown but showing in web developer tool

Question

I've a input list. I've bind the data items from my code behind page. But the items are not showing in drop down but the items are shown in webdeveloper tools.

Please see the attached figure. In the text box when I type "a" no items are displayed, but when I debug the UI using web developer tool, the items are shown there.

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Sample.aspx.cs" Inherits="Sample" MasterPageFile="AdminMaster.master" %>

<asp:Content ID="UserContent" runat="server" ContentPlaceHolderID="ContentPlaceHolder1">
    <style>
        .content {
            min-height: 250px;
            padding: 15px;
            margin-right: auto;
            margin-left: auto;
            padding-left: 15px;
            padding-right: 15px;
        }

        .box {
            position: relative;
            border-radius: 3px;
            background: #ffffff;
            border-top: 3px solid #d2d6de;
            margin-bottom: 20px;
            width: 100%;
            box-shadow: 0 1px 1px rgba(0,0,0,0.1);
        }

            .box.box-default {
                border-top-color: #d2d6de;
            }


        .box-title {
            display: inline-block;
            font-size: 18px;
            margin: 0;
            line-height: 1;
        }

        .fa {
            display: inline-block;
            font: normal normal normal 14px/1 FontAwesome;
            font-size: inherit;
            text-rendering: auto;
            -webkit-font-smoothing: antialiased;
        }
        /*.fa-tag:before {
    content: "\f02b";
}*/

        .box-header.with-border {
            border-bottom: 1px solid #f4f4f4;
        }

        .box-header {
            color: #444;
            display: block;
            padding: 10px;
            position: relative;
        }

        .form-horizontal .form-group {
            margin-left: -15px;
            margin-right: -15px;
        }

        .box-body {
            border-top-left-radius: 0;
            border-top-right-radius: 0;
            border-bottom-right-radius: 3px;
            border-bottom-left-radius: 3px;
            padding: 10px;
        }

        .form-horizontal .control-label {
            padding-top: 7px;
            margin-bottom: 0;
            text-align: right;
        }

        .form-control {
            display: block;
            width: 50%;
            height: 34px;
            padding: 6px 12px;
            font-size: 14px;
            line-height: 1.42857143;
            color: #555;
            background-color: #fff;
            background-image: none;
            border: 1px solid #ccc;
            border-radius: 4px;
            -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
            box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
            -webkit-transition: border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;
            -o-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
            transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
        }

            .form-control:focus {
                border-color: #66afe9;
                outline: 0;
                -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, 0.6);
                box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, 0.6);
            }

            .form-control::-moz-placeholder {
                color: #999;
                opacity: 1;
            }

            .form-control:-ms-input-placeholder {
                color: #999;
            }

            .form-control::-webkit-input-placeholder {
                color: #999;
            }

        label {
            display: inline-block;
            margin-bottom: 5px;
            font-weight: 700;
        }

        .input_text {
            width: 80%;
            text-transform: uppercase;
        }
    </style>
    <div class="content">
        <div class="box box-default ">
            <div class="box-header with-border">
                <h3 class="box-title"><i class="fa fa-tag"></i>Student Registration</h3>
            </div>
            <div class="form-horizontal">
                <div class="box-body">
                    <div class="form-group">
                        <label for="inputName" class="col-md-1 control-label">Name</label>
                        <div class="col-md-8">
                            <input type="text" class="form-control input_text" id="inputName" placeholder="NAME" />
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="inputRoll" class="col-md-1 control-label">Roll Number</label>
                        <div class="col-md-8">
                            <input type="text" class="form-control input_text" id="inputRoll" placeholder="ROLL" />
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="inputAddress" class="col-md-1 control-label">Gender</label>
                        <div class="col-md-8">
                            <label class="radio-inline">
                                <input type="radio" name="clouds" id="Clear" value="clear" checked="checked" />
                                Male
                            </label>
                            <label class="radio-inline">
                                <input type="radio" name="clouds" id="Cloudy" value="cloudy" />
                                Female
                            </label>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="inputAddress" class="col-md-1 control-label">Class</label>
                        <div class="col-md-8">
                            <input list="fruits" runat="server"  />
                            <datalist id="fruits" runat="server"></datalist>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="inputAddress" class="col-md-1 control-label">Address</label>
                        <div class="col-md-8">
                            <input type="text" class="form-control input_text" id="inputAddress2" placeholder="Email" />
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </div>
</asp:Content>

code behind page code

protected void Page_Load(object sender, EventArgs e)
    {
        DataTable table = new DataTable();
        table.Columns.Add("fruits");
        table.Rows.Add("apple");
        table.Rows.Add("banana");
        table.Rows.Add("pineapple");
        table.Rows.Add("mango");
        table.Rows.Add("watermelon");
        table.Rows.Add("lemon");
        table.Rows.Add("guava");
        table.Rows.Add("jackfruit");

        var builder = new System.Text.StringBuilder();

        for (int i = 0; i < table.Rows.Count; i++)
            builder.Append(String.Format("<option value='{0}'>", table.Rows[i][0]));
        fruits.InnerHtml = builder.ToString();
    }

Answer 1

The problem is that the datalist ID generated by ASP.NET is not fruits but ContentPlaceHolder1_fruits.

You should first give the input an ID, so you can access it from the code behind.

<input list="fruits" runat="server" id="fruitsInput"  />

And then from the code behind set the right datalist ID

fruitsInput.Attributes["list"] = fruits.ClientID;

So your markup should look like this

<div class="col-md-8">
    <input list="fruits" runat="server"  />
    <datalist id="fruits" runat="server"></datalist>
</div>

And you code behind like this

protected void Page_Load(object sender, EventArgs e)
{
    DataTable table = new DataTable();
    table.Columns.Add("fruits");
    table.Rows.Add("apple");
    table.Rows.Add("banana");
    table.Rows.Add("pineapple");
    table.Rows.Add("mango");
    table.Rows.Add("watermelon");
    table.Rows.Add("lemon");
    table.Rows.Add("guava");
    table.Rows.Add("jackfruit");

    var builder = new System.Text.StringBuilder();

    for (int i = 0; i < table.Rows.Count; i++)
        builder.Append(String.Format("<option value='{0}'>", table.Rows[i][0]));

    fruits.InnerHtml = builder.ToString();
    fruitsInput.Attributes["list"] = fruits.ClientID;
}