MVC5中的自动完成下拉菜单？

Posted 2023-03-05

【中文标题】MVC5中的自动完成下拉菜单？

【英文标题】：Autocomplete dropdown in MVC5?

【发布时间】：2016-10-01 19:49:15

【问题描述】：

您好，我的视野中有一个领域。该字段是客户，它是一个下拉字段。因为我将下拉菜单作为选择选项来选择值。但我喜欢将该字段更改为自动完成下拉菜单。

在上图中，我将 customerName 字段作为下拉字段，但我通过搜索和选择选项保留它。但现在我想将其更改为自动完成下拉菜单，如下图所示。

我的查看代码

 @html.Label("Customer Name", new  @class = "control-label" )
 @Html.DropDownListFor(model => model.CustomerID, new SelectList(string.Empty, "Value", "Text"), "Please select a Customer", new  @class = "form-control required", type = "text" )

我的 jquery 代码

  $(function () 
     debugger;
    $.ajax(

   '@Url.Action("GetVisitCustomer", "VisitorsForm", new  Area = "Sales" )',
       type: "GET",
       datatype: "Json",
       success: function (data) 
       $.each(data, function (index, value) 
       $('#CustomerID').append('<option value="' + value.CustomerID + '">' + value.DisplayName + '</option>');

                );
               
             );            
           );

我的控制器代码用于获取客户并在现场加载

  public JsonResult GetVisitCustomer()
    
        var objCustomerlist = (from c in db.Customers where c.IsDeleted== false select c).ToList();
        return Json( objCustomerlist,JsonRequestBehavior.AllowGet);
    

我试图解释我的问题。任何人都可以帮助解决此问题。我尝试了很多方法，但它不起作用。所以任何人都理解我的问题并给出一些解决方案或建议。

我尝试过的代码

我的查看代码

 @Html.Label("Customer Name", new  @class = "control-label" )
 @Html.TextBoxFor(Model=>Model.CustomerID)

我的 Jquery 代码

  <script type="text/javascript">
    $(document).ready(function () 
        debugger;
        $("#CustomerID").autocomplete(
            source: function (request, response) 
                $.ajax(
                     '@Url.Action("GetVisitCustomer", "VisitorsForm", new  Area = "Sales" )', 
                    type: "POST",
                    dataType: "json",
                    data:  term: request.term ,
                    success: function (data) 
                        response($.map(data, function (item) 
                            return
                             label=item.CustomerID, value= item.DisplayName
                            ;
                        ))

                    
                )
            ,
            messages: 
                noResults: "", results: ""
            
        );
    )
</script>

但是这段代码不起作用

提前谢谢..

【问题讨论】：

你现在的代码有什么问题？

jquery-ui autocomplete

我将发布我尝试过但无法正常工作的代码

现在检查我尝试过的代码 stephen

嗨@Susan，如果我回答了您的问题，您能否标记我的回答。谢谢

【参考方案1】：

请看下面的代码：

HTML

            @Html.LabelFor(model => Model.CustomerName, new  @class = "control-label" )
            @Html.TextBoxFor(model => Model.CustomerName, new  @class = "form-control")
            @Html.HiddenFor(model => Model.CustomerID)

JS

$(document).ready(function () 
    $("#CustomerName").autocomplete(
        source: function (request, response) 
            $.ajax(
                url: '@Url.Action("GetVisitCustomer", "Home")',
                datatype: "json",
                data: 
                    Areas: 'Sales',
                    term: request.term
                ,
                success: function (data) 
                    response($.map(data, function (val, item) 
                        return 
                            label: val.Name,
                            value: val.Name,
                            customerId: val.ID
                        
                    ))
                
            )
        ,
        select: function (event, ui) 
            $("#CustomerID").val(ui.item.customerId);
        
    );
);

代码

    public JsonResult GetVisitCustomer(string Areas, string term = "")
    
        var objCustomerlist = db.Customers.Where(c => c.IsDeleted == false)
                        .Where(c => c.CustomerName.ToUpper()
                        .Contains(term.ToUpper()))
                        .Select(c => new  Name = c.CustomerName, ID = c.CustomerID )
                        .Distinct().ToList();
        return Json(objCustomerlist, JsonRequestBehavior.AllowGet);
    

截图示例

【讨论】：

Denchu 我按照你说的那样尝试了第二种方法，它没有显示任何错误。它命中了 json (GetVisit Customer) 并计算了我在文本框中输入的值，但计算后它没有显示视图中的计算值以选择与上图中提到的选项相同的选项..

嗨@Susan。我更新了我的答案并添加了屏幕截图，以便您可以看到结果。我所做的是，从 JsonResult、CustomerID 和 CustomerName 返回 2 个数据。在上面的示例中，一旦从自动完成下拉列表中选择了适当的客户名称，CustomerID 隐藏字段将填充正确的 ID，我在第二张图片中显示了该 ID。

ok Denchu 让我试试看，如果我有问题，我会通知你

顺便说一句，为什么要添加Areas参数？您还需要它作为 JsonResult 方法中客户列表的过滤器吗？

Denchu 是我们在一个应用程序中合并了两个项目，我的项目将在区域下销售。我的表格都在“区域”下的“销售”中，所以只有我这样使用。