Kendo autocomplete with multiple keywords

Question

I'm actually doing a Kendo Autocomplete. But I have some problems. Like in this post Autocomplete with multiple keywords, I want to have multiple keywords. But seems impossible to me to do that with the Kendo Autocomplete, I tried a lot of solutions without success.

I can't have more of one keywords in my search bar. For example, with the word Apple in my dataSource, I want to be able to write "Ap pl Appl le", and Apple is proposed, because all this terms are in this word.

I already do that in jquery-ui but impossible to do that again in Kendo-ui.

Actually I have only a basic Autocomplete because I doesn't find solution, and I always go back to the base, so I have nothing special to show.

If you have solutions, I take it with pleasure !

Thanks, Q.Huet.

Edit : This is what I have with only jquery-ui and can't reproduce with Kendo autocomplete :

Autocomplete example 1

Autocomplete example 2

Stephan T. · Answer 1 · 2018-09-21T06:33:14.403

I simply edited the Autocomplete Demo and achieved your goal:

    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>

EDIT:

I found this demo, which eventually combines grid and autocomplete, what seems just right for your needs, you can filter in as many fields as you want and the datasource can be more precise if you don't use strings for the regional codes of france and city names all in one field :) If you have trouble changing the demo to your needs, I can gladly help.

PS:

The example behaves strangly when trying to filter with 'contains', when the value is a number, so stick to full numbers in this example and maybe use string filtering for the regional codes.

Hello, first of all, thanks for answering my question. But I already try that, the problem is, when I write "appl ap pp", I want, the autocomplete keep in memory the first keywords. For example, if I write "po a", only Portugal and Poland display and if I write "po a rtugal" I have only Portugal. The goal is to create an autocomplete for city and postal code in France. For example if you only have department and first letters of the city, you can try "75 paris", to have your city. I hope you understand what I'm trying to do. :) — Quentin Huet, Sep 20 '18 at 13:12
Thanks for the feedback, yeah it is quite hard achieving this, but with the **filtering** option instead of __filter__ you can access the event and filter it yourself, from where you can surely achieve your goal — Stephan T., Sep 21 '18 at 05:45
Thanks for all your help, I adapt the demo to my needs and it works perfectly with a grid. But, ( I'm sorry to asking your help again ), my boss tell me he wants all in only one input. I edit my question with images to show what I have with juqery-ui and what I need to make with Kendo autocomplete. The final goal is to make a form to easily choose some informations like city/postal code. So it's better for users to have only one input and an autocomplete who can help them to find easily a city. Thanks again for your help — Quentin Huet, Sep 21 '18 at 08:53

Kendo autocomplete with multiple keywords

1 Answers1