mvc 视图选择下拉 ui 改进答案

【问题标题】：mvc view select dropdown ui improvementmvc 视图选择下拉 ui 改进
【发布时间】：2021-08-14 22:22:44
【问题描述】：

所以我目前将此作为我在 mvc 视图 html 中的选择

<select style="width:88%" asp-for="Account.CustomerID" asp-items="@(new SelectList(Model.ViewID,"CustomerID","CustomerID"))" required></select>

这通过在下拉列表中显示所有客户 ID 来实现，但如果我的模型中有超过 1000 个客户 ID，那么下拉列表将变得太大。

所以我想改变它，这样当用户开始输入时，它只会显示与输入匹配的数字，

如果我的模型有 100,111,112,200,201,202

用户开始输入 1 时只显示 100,101，然后显示 102，然后如果他们输入另一个 1，则只显示 111 和 112

【问题讨论】：

嗨@Andrew Lin，我想你可以试试 AutoComplete 插件。

标签： html asp.net-core-mvc

【解决方案1】：

这是一个完整的工作演示，您可以关注：

型号：

public class Account
{
    public int CustomerID { get; set; }
}
public class Test
{
    public Account Account { get; set; }
}

查看：

@model Test
<input type="text" asp-for="Account.CustomerID" />
@section Scripts{
    <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
    <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
    <script>
        $(function () {
            $("#Account_CustomerID").autocomplete({
                source: '/Home/Test'
            });
        });
    </script>
}

控制器：

public class HomeController : Controller
{
    public IActionResult Index()
    {
        return View();
    }
    [HttpGet]
    public IActionResult Test()
    {
        var name = HttpContext.Request.Query["term"].ToString();
        var model = new List<Account>()   //you can get data from the database
        {
           new Account(){CustomerID=101},
           new Account(){CustomerID=102},
           new Account(){CustomerID=103},
           new Account(){CustomerID=110},
           new Account(){CustomerID=111},
           new Account(){CustomerID=112},
           new Account(){CustomerID=113},
        };

        //autocomplete accept string array in frontend
        var customerID = model.Where(c => c.CustomerID.ToString().Contains(name))
                            .Select(c => c.CustomerID.ToString()).ToList();
        return Ok(customerID);
    }
}

结果：

【讨论】：