Kendo autocomplete with multiple keywords

Question

Kendo autocomplete with multiple keywords

1.3k Views Asked by Quentin Huet At 20 October 2024 at 20:18

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

Original Q&A

There are 1 best solutions below

**Stephan T.** · Answer 1

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.

Kendo autocomplete with multiple keywords

There are 1 best solutions below

Related Questions in JAVASCRIPT

Related Questions in JQUERY

Related Questions in KENDO-UI

Related Questions in AUTOCOMPLETE

Related Questions in KENDO-AUTOCOMPLETE

Trending Questions

Popular # Hahtags

Popular Questions