Question

我想创建一个具有自动完成功能的剃须刀剑道组合框。它应该与Kendo AutoComplete的工作方式完全相同。我面临的问题是，只有当我将鼠标悬停在然后将鼠标悬停在kendo组合框中并且加载数据时不会弹出下拉列表。任何人都可以帮我解决这个问题。

这是我的观点

@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);
}

Answer 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));
    }

Answer 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>

c＃

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

在MVC中创建具有自动完成功能的kendo组合框

2 个答案: