如何将列表框中未包含的项目添加到asp.net中的列表框中？

Question

我需要 asp.net webform 中的控件。当用户在此控件中写入文本并单击 Enter 时，应选择相关文本并显示在控件中。在这种情况下，我尝试了列表框，但没有选择它，因为列表框是空的并且不包含用户输入的值，因此，我需要一个像列表框一样工作的控件，但像列表框一样，用户应该选择任何内容他没有检查输入的文本是否在其中就输入了。

预期结果应如下所示；

我该怎么做？

Answer 1

实际上，列表框或复选框列表看起来是一个不错的选择。

所以，说出这个标记：

        <h3>Enter a text value</h3>
        <asp:TextBox ID="txtItem" runat="server"
            width="200px"
            OnTextChanged="txtItem_TextChanged"
            AutoPostBack="true">
        </asp:TextBox>

        <br />
        <br />
        <br />

        <asp:CheckBoxList ID="CheckBoxList1" runat="server" RepeatDirection="Horizontal"
            CssClass="myrb2">
        </asp:CheckBoxList>

并说出背后的代码：

Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load

    If Not IsPostBack Then
        ' load some sample values into check box list
        CheckBoxList1.Items.Add("One")
        CheckBoxList1.Items.Add("Two")
        CheckBoxList1.Items.Add("Three")

    End If
End Sub

Protected Sub txtItem_TextChanged(sender As Object, e As EventArgs)

    If txtItem.Text <> "" Then
        ' look for the item in the existing list

        For Each OneItem As ListItem In CheckBoxList1.Items

            If OneItem.Text = txtItem.Text Then
                ' item is in the list, check box, and exit
                OneItem.Selected = True
                Return
            End If

        Next

        ' if we get here, then entered text was not in the list
        ' add to list and check it
        Dim AddOneItem As New ListItem
        AddOneItem.Selected = True 'check the box
        AddOneItem.Text = txtItem.Text

        CheckBoxList1.Items.Add(AddOneItem)
    End If

End Sub

结果是这样的：

输入现有项目将导致该项目被选中。

如果我们输入当前列表中没有的文本，则会添加（并选中）该项目。

因此：

我使用了一个复选框列表，您可以随意设置其中的多种样式。

因此，我使用这个 css 作为复选框列表：

.myrb2 label {
    height: 100%;
    display: inline-block;
    background: white;
    border-radius: 20px;
    padding: 1rem;
    margin-bottom: 1rem;
    text-align: center;
    box-shadow: 0px 3px 10px -2px hsla(150, 5%, 65%, 0.5);
    position: relative;
    margin-left: 5px;
    margin-right:20px;
    border: 2px solid hsla(150, 5%, 75%, 1);
}

.myrb2 input[type="checkbox"]:checked + label {
    display:inline-block;
    background: hsla(150, 5%, 75%, 1);
    box-shadow: 0px 3px 10px -2px hsla(150, 5%, 65%, 0.5);
    border-radius: 20px;
    margin-bottom: 1rem;
    text-align: center;
    box-shadow: 0px 3px 10px -2px hsla(150, 5%, 65%, 0.5);
}
.myrb2 input[type="checkbox"] {
    display:inline-block;
    background: hsla(150, 5%, 75%, 1);
    box-shadow: 0px 3px 10px -2px hsla(150, 5%, 65%, 0.5);
    border-radius: 20px;
    margin-bottom: 1rem;
    text-align: center;
}