当用户单击文本输入框时如何在@Html.EditorFor() 中显示下拉列表

Question

I am passing data from the Controller to the View using the ViewData
Code in the controller:

public ActionResult Create()
        {
            ViewData["gN"] = new SelectList(db.gT, "id", "gN");
            return View();
        }

In the View I am using @Html.EditorFor() to create the new item for our table which we store in the database.

<div class="col-md-10">
     @Html.EditorFor(model => model.gT.gN, new { htmlAttributes = new { @class = "form-control" } })
     @Html.ValidationMessageFor(model => model.groupid, "", new { @class = "text-danger" })
</div>

When I am using @Html.DropDownList our list of gN is perfectly showing as the dropdown list

 @Html.DropDownList("gN", null, htmlAttributes: new { @class = "form-control" })

I want to use EditorFor() so that when the user starts typing in the input box, the dropdown list appears below it. and if that text which user is typing, present in the dropdown then the user can select it. How we should show the list gN (which we are getting using ViewData from Controller) in the EditorFor() HTML element?

Answer 1

The Html.EditorFor() method always creates an <input> element, though the type attribute can vary depending on the model property type. HTML5 actually supports exactly what you want with the <datalist> element, which you tie to an <input> element with the list attribute. the <datalist> element takes child <option> elements containing the values you want in the list.

Making some guesses about your models here...

// Controller
public ActionResult Create()
{
    ViewData["gN"] = db.gT;
    return View();
}

// View
@Html.EditorFor(model => model.gT.gN, new { htmlAttributes = new { @class = "form-control", list="gN-datalist" } })
<datalist id="gn-datalist">
    @foreach (var item in (gT)ViewData["gN"])
    {
        <option value="@item.id">@item.gN</option>
    }
</datalist>

You could also create an HtmlHelper extension method that would create this for you.