Автозаполнение кендо с несколькими ключевыми словами - PullRequest
Новая
       23

Автозаполнение кендо с несколькими ключевыми словами

0 голосов
/ 20 сентября 2018

Я на самом деле делаю автозаполнение кендо.Но у меня есть некоторые проблемы.Как и в этом посте Автозаполнение с несколькими ключевыми словами , я хочу иметь несколько ключевых слов.Но мне кажется невозможным сделать это с помощью автозаполнения Kendo, я попробовал множество решений без успеха.

У меня не может быть больше одного ключевого слова в моей строке поиска.Например, со словом Apple в моем источнике данных я хочу иметь возможность написать «Ap pl Appl le», и Apple предлагается, потому что все эти термины в этом слове.

Я уже делаю это вjquery-ui, но невозможно сделать это снова в Kendo-ui.

На самом деле у меня есть только базовое автозаполнение, потому что я не могу найти решение, и я всегда возвращаюсь на базу, поэтому у меня нет ничего особенного, чтобыпокажи.

Если у тебя есть решения, я с удовольствием приму!

Спасибо, Q.Huet.

Редактировать: Это то, что у меня естьтолько с jquery-ui и не может воспроизводиться с автозаполнением Kendo:

Пример автозаполнения 1

Пример автозаполнения 2

1 Ответ

0 голосов
/ 20 сентября 2018

Я просто отредактировал демо 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:

Пример ведет себя странно, когда пытается фильтровать с помощью параметра "содержит", когда значение равночисло, поэтому придерживайтесь полных чисел в этом примере и, возможно, используйте строковую фильтрацию для региональных кодов.

...