如何避免在kendo自动完成中重复值

时间:2014-04-21 05:40:45

标签: autocomplete filter kendo-ui

我在网格上使用kendo grid还有一个kendo自动完成控件。网格行包含一个具有重复值的列。在搜索时,如何区分列值?

var d1 = $("#grid").data("kendoGrid").dataSource;
$("#acProjName").kendoAutoComplete({
              dataSource: d1,
              dataTextField: "ProjectName",
              filter: "startswith",
              placeholder: "Project Name",
              change: ProjectSearch
             );

提前谢谢?

2 个答案:

答案 0 :(得分:1)

在将数组作为DataSource(或基于它创建DataSource)提供给AutoComplete小部件之前,您必须对其进行过滤。

答案 1 :(得分:0)

请尝试使用以下代码段。

<head>
    <title>Test</title>
    <link href="http://cdn.kendostatic.com/2014.1.318/styles/kendo.common.min.css" rel="stylesheet" />
    <link href="http://cdn.kendostatic.com/2014.1.318/styles/kendo.default.min.css" rel="stylesheet" />
    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script src="http://cdn.kendostatic.com/2014.1.318/js/kendo.all.min.js"></script>
    <script type="text/javascript">
        var data = [
  { "make": "Audi", "model": "A1" },
  { "make": "Audi", "model": "A2" },
  { "make": "Audi", "model": "A3" },
  { "make": "Audi", "model": "A4" },
  { "make": "Saab", "model": "S500" }
];

        $(document).ready(function () {

            $("#grid").kendoGrid({
                dataSource: {
                    data: data
                },
                columns: [{
                    field: "make",
                    title: "make"

                }, {
                    field: "model",
                    title: "model"
                }]
            });

            makesDatasource = new kendo.data.DataSource({
                data: $("#grid").data("kendoGrid").dataSource.data(),
                group: { field: "make", value: "make" }
            });



            var makes = $("#makes").kendoDropDownList({
                optionLabel: "Select make...",
                dataTextField: "value",
                dataValueField: "value",
                dataSource: makesDatasource
            }).data("kendoDropDownList");

        });
    </script>
</head>
<body>
    <div>
        <div id="grid">
        </div>
        <div id="makes">
        </div>
    </div>
</body>

由于某种原因,自动完成控件在我的系统中无效,所以我提供了与DropdownList控件相关的演示。请检查下拉列表控件中的datasource和datatextfield。您必须在自动完成控件中添加相同的属性。

如果有任何疑虑,请告诉我。