get the id of selected item from html5 input list

Question

How can I get the ID of the selected item from the input list. I can fetch the item but can not fetch the ID of the selected item.

<div class="form-row">
    <label>
        <span>&nbsp;Selected Items</span>
        <input list="username" runat="server" id="usernameInput" class="form-control input_list" placeholder="FACULTY" required="required" />
            <datalist id="username" runat="server"></datalist>
    </label>
</div>
<div class="form-row">
    <label>
        <span>&nbsp;&nbsp;Selected HTML5 Input</span>
        <input type="text" id="input_selected" runat="server" />
    </label>
</div>
<div class="form-row">
        <asp:Button ID="btnSubmit" runat="server" Text="Submit" OnClick="btnSubmit_Click" />
</div>

I want to display USER_NAME in the input list to the user but want to fetch USER_ID of the selected USER_NAME in the codebehind page.

public void GetUserName()
        {
                string strQuery = "SELECT USER_ID, USER_NAME FROM TBL_USER";
                SqlCommand cmd = new SqlCommand(strQuery);
                DBConnection conn_ = new DBConnection();
                DataTable dt = conn_.SelectData(cmd);

                var builder = new System.Text.StringBuilder();
                for (int i = 0; i < dt.Rows.Count; i++)
                {
                    builder.Append(String.Format("<option value='{0}'>", dt.Rows[i][1]));
                }
                username.InnerHtml = builder.ToString();
                usernameInput.Attributes["list"] = username.ClientID;
        }
protected void btnSubmit_Click(object sender, EventArgs e)
        {
                input_selected.Value = usernameInput.Value;
        }

This gives me the USER_NAME but I want to fetch USER_ID in the code behind page. How can I do that?

score 0 · Answer 1 · answered Sep 14 '17 at 04:47

Some concerns regarding HTML5 datalist element from HTML Form: Select-Option vs Datalist-Option:

If we focus on the use of <datalist> as a list of options for a text field then here are some specific differences between that and a select box:

A <datalist> fed text box has a single string for both display label and submit. A select box can have a different submit value vs. display label <option value='ie'>Internet Explorer</option>.

As mentioned above, the display label text & value for datalist has same string, so that you can't use builder.Append(String.Format("<option value='{0}'>{1}</option>", ...) placeholder in a datalist as generally used in select element.

a) If you still want to use datalist & fetch user ID instead of user name, you can store DataTable contents inside Session (or other instance which able to hold DataTable during runtime, hence no need to re-query the DB again) and perform DataTable.Select query during btnSubmit_Click event afterwards:

public void GetUserName()
{
    // other stuff

    DataTable dt = conn_.SelectData(cmd);
    Session["Datatable"] = dt;

    // other stuff
}

// Button click event handler
protected void btnSubmit_Click(object sender, EventArgs e)
{
    var value = usernameInput.Value;
    DataTable dt = (DataTable)Session["Datatable"];
    string expression = "USER_NAME = '" + value + "'";

    DataRow[] result = dt.Select(expression);

    input_selected.Value = result[0][0].ToString(); // ensure the result is only a single user ID result
}

b) If you willing to change datalist to plain select element which able to contain different data label & form submit value, use aforementioned option placeholder before:

for (int i = 0; i < dt.Rows.Count; i++)
{
     // if the DataTable has 2 columns,
     // 0 = USER_ID, 1 = USER_NAME
     builder.Append(String.Format("<option value='{0}'>{1}</option>", dt.Rows[i][0].ToString(), dt.Rows[i][1].ToString()));
}

// Button event handler
protected void btnSubmit_Click(object sender, EventArgs e)
{
    input_selected.Value = username.Value;
}

<%-- datalist changed to select element --%>
<select id="username" runat="server" ...></select>

Then, you can remove input tag named usernameInput required by datalist & use client-side autocomplete feature with JS.

get the id of selected item from html5 input list

1 Answers1