Question

我实际上是在做剑道自动完成。但是我有一些问题。就像在这篇文章Autocomplete with multiple keywords中一样，我想要多个关键字。但是对于Kendo Autocomplete来说，这似乎是不可能的，我尝试了很多解决方案，但均未成功。

我的搜索栏中不能有多个关键字。例如，在我的数据源中使用苹果一词，我希望能够编写“ Ap pl Appl le”，因此建议使用苹果，因为所有这些术语都在这个词中。

我已经在jquery-ui中做到了，但是不可能在Kendo-ui中再次做到这一点。

实际上，我只有一个基本的自动完成功能，因为我找不到解决方案，而且我总是回到基础上来，所以我没有什么特别需要展示的。

如果您有解决方案，我会很乐意接受！

谢谢Q.Huet。

编辑：这是我只有jquery-ui才能使用的功能，而Kendo自动完成功能无法复制它：

Autocomplete example 1

Autocomplete example 2

Answer 1

我只是编辑了Autocomplete Demo并实现了您的目标：

    function filterAutoCompleteDataSource(e) {
      var gridFilter = e.sender.dataSource.filter();
      e.sender.element.find(".k-autocomplete input").data("kendoAutoComplete").dataSource.filter(gridFilter);
    }

    $(document).ready(function () {
      $("#grid").kendoGrid({
        dataSource : {
          type : "odata",
          transport : {
            read : "//demos.telerik.com/kendo-ui/service/Northwind.svc/Orders"
          },
          schema : {
            model : {
              fields : {
                OrderID : {
                  type : "number"
                },
                Freight : {
                  type : "number"
                },
                ShipName : {
                  type : "string"
                },
                OrderDate : {
                  type : "date"
                },
                ShipCity : {
                  type : "string"
                }
              }
            }
          },
          pageSize : 20,
          serverPaging : true,
          serverFiltering : true,
        },
        dataBound : filterAutoCompleteDataSource,
        height : 550,
        filterable : {
          mode : "row"
        },
        pageable : true,
        columns :
        [{
            field : "OrderID",
            width : 225,
            title: "OrderID",
            filterable : {
              cell : {
                showOperators : false
              }
            }
          }, {
            field : "ShipName",
            width : 500,
            title : "Ship Name",
            filterable : {
              cell : {
                operator : "contains"
              }
            }
          }, {
            field : "Freight",
            width : 255,
            filterable : {
              cell : {
                operator : "gte"
              }
            }
          }, {
            field : "OrderDate",
            title : "Order Date",
            format : "{0:MM/dd/yyyy}"
          }
        ]
      });
    });

<!DOCTYPE html>
<html>
<head>
    <base href="https://demos.telerik.com/kendo-ui/autocomplete/index">
    <style>html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }</style>
    <title></title>
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.3.911/styles/kendo.common-material.min.css" />
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.3.911/styles/kendo.material.min.css" />
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.3.911/styles/kendo.material.mobile.min.css" />

    <script src="https://kendo.cdn.telerik.com/2018.3.911/js/jquery.min.js"></script>
    <script src="https://kendo.cdn.telerik.com/2018.3.911/js/kendo.all.min.js"></script>
    

</head>
<body>
        <div id="grid"></div>
</body>
</html>

编辑：

我发现了这个demo，它最终结合了网格和自动完成功能，看起来似乎恰好满足您的需求，您可以根据需要过滤任意多个字段，如果不使用，则数据源可以更精确法国的区域代码和城市名称的字符串都在一个字段中:) 如果您在根据自己的需要更改演示时遇到困难，我们可以为您提供帮助。

PS：

该示例在尝试使用“ contains”进行过滤时，如果值是一个数字，则表现得很差劲，因此在此示例中请坚持使用全数字，并且可能会对区域代码使用字符串过滤。

Kendo具有多个关键字的自动完成功能

1 个答案: