在 MVC 中创建具有自动完成功能的剑道组合框答案

【问题标题】：creating kendo combobox with autocomplete functionality in MVC在 MVC 中创建具有自动完成功能的剑道组合框
【发布时间】：2014-11-24 04:45:10
【问题描述】：

我想创建一个具有自动完成功能的剃刀剑道组合框。它应该与 Kendo AutoComplete 的工作方式完全相同。我面临的问题是过滤器仅在我将鼠标悬停然后悬停在剑道组合框和加载数据时不会弹出下拉菜单。谁能帮我解决这个问题。

这是我的观点

@using Kendo.MVC.UI 
@(Html.Kendo().ComboBox()
  .Name("autoComplete")
  .DataTextField("CustomerName")
  .Filter(FilterType.StartsWith)
  .DataSource(source => source.Read(read => read.Action("GetUserNames", "UserNames").Data("onStringChange"))
  .ServerFiltering(true))
  .HtmlAttributes(new { style = "width:20%;" })
  .Suggest(true)
  .AutoBind(false)
  .MinLength(2)
)

这是我的 Javascript

function onStringChange() {
  return {
    user: $("#autoComplete").val()
  };
}

这是我的控制器操作方法：

public JsonResult GetUserNames(string user)
{
  if (user != "")
  {
    _access = _data.GetUserNames(user);
  }
  return Json(_access, JsonRequestBehavior.AllowGet);
}

【问题讨论】：

你能展示你传递给组合框的对象的样子吗？
我已将对象作为字符串传递，例如：hel

标签： jquery asp.net-mvc asp.net-mvc-4 html-helper kendo-asp.net-mvc

【解决方案1】：

您必须使用 Kendo 自动完成控件来完成。

查看：

 @(Html.Kendo().AutoComplete()
                        .Name("autocompleteID")
                        .DataTextField("TextFieldName")
                        .DataSource(source =>
                        {
                            source.Read(read =>
                            {
                                read.Action("GetUserNames", "ControllerName");
                            })
                            .ServerFiltering(true);
                        }))

控制器：

public JsonResult Search([DataSourceRequest] DataSourceRequest request)
    {
        string filter = Request.Params["filter[filters][0][value]"];
        return Json(_data.GetUserNames(filter));
    }

【讨论】：

【解决方案2】：

html

 @(Html.Kendo().ComboBox().Name("IdUser")
.Placeholder("Select User")
.DataTextField("text")
.DataValueField("value")
.HtmlAttributes(new { style = "width:100%;", @class = "form-control" })
.Filter(FilterType.Contains)
.AutoBind(false)
.MinLength(3).DataSource(source =>
 {
  source.Read(read =>
   { 
read.Action("ServerFiltering_GetList", "Users").Data("onAdditionalData");
    })
     .ServerFiltering(true);
})

发送text 到服务器。 text 是您在组合中键入的任何内容。

 <script>
function onAdditionalData() {
   var filter = $('#IdUser').data('kendoComboBox').dataSource.filter();                  
    return {
           text: (filter.filters.length > 0) ? filter.filters[0].value : ''
           };
 }
 </script>

  public JsonResult ServerFiltering_GetList(string text)
        {           
                var Result = _userSite.GetListUser(text);
                return Json(Result);           
        }

【讨论】：