时间戳

首页 > 解决方案 > 具有多个关键字的剑道自动完成功能

javascript - 具有多个关键字的剑道自动完成功能

问题描述

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

我的搜索栏中不能有多个关键字。比如我的dataSource里有Apple这个词，我希望能写成“Ap pl Apple”，建议Apple，因为所有这些词都在这个词里。

我已经在 jquery-ui 中这样做了，但在 Kendo-ui 中不可能再这样做了。

实际上我只有一个基本的自动完成，因为我没有找到解决方案，而且我总是回到基地，所以我没有什么特别的东西可以展示。

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

谢谢，Q.Huet。

编辑：这是我只有 jquery-ui 所拥有的，并且无法使用 Kendo 自动完成来重现：

自动完成示例 1

自动完成示例 2

标签： javascriptjquerykendo-uiautocompletekendo-autocomplete

解决方案

我只是编辑了自动完成演示并实现了您的目标：

    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>

编辑：

我找到了这个演示，它最终结合了网格和自动完成，看起来正好适合您的需求，您可以根据需要过滤任意数量的字段，如果您不使用字符串作为法国的区域代码，数据源可以更精确和城市名称都在一个字段中 :) 如果您无法根据需要更改演示，我很乐意提供帮助。

PS：

该示例在尝试使用 'contains' 进行过滤时表现异常，当值是一个数字时，因此在此示例中坚持使用完整数字，并且可能对区域代码使用字符串过滤。

推荐阅读