html5 输入列表项未显示在下拉列表中，但显示在 Web 开发人员工具中

Question

我有一个输入列表。我已经绑定了我的代码隐藏页面中的数据项。但是这些项目没有显示在下拉列表中，但是这些项目显示在 webdeveloper 工具中。

请看附图。在文本框中，当我键入 "a" 时，没有显示任何项目，但是当我使用 Web 开发人员工具调试 UI 时，项目会显示在那里。

<%@ 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>

页面代码后面的代码

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

问题是ASP.NET生成的datalist ID不是fruits而是ContentPlaceHolder1_fruits.

你应该先给输入一个ID，这样你就可以从后面的代码中访问它。

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

然后从后面的代码中设置正确的数据列表ID

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

因此您的标记应如下所示

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

而你的编码是这样的

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;
}

html5 输入列表项未显示在下拉列表中，但显示在 Web 开发人员工具中

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

html

c#

asp.net

listitem