Post
Ask Question

Filter Customization In Kendo Autocomplete

Introduction

Filter customization in Kendo autocomplete control is out of box, but we can make it using the setoption. In this blog we are going to see how to handle multiple operator for same data text field for filter in Kendo autocomplete

Kendo Autocomplete with Filter

KendoAutocomplete.html 
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4.     <meta charset="utf-8">  
  5.     <title>Untitled</title>  
  6.   
  7.     <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.1.117/styles/kendo.common.min.css">  
  8.     <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.1.117/styles/kendo.rtl.min.css">  
  9.     <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.1.117/styles/kendo.default.min.css">  
  10.     <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.1.117/styles/kendo.mobile.all.min.css">  
  11.   
  12.     <script src="https://code.jquery.com/jquery-1.12.3.min.js"></script>  
  13.     <script src="https://kendo.cdn.telerik.com/2018.1.117/js/angular.min.js"></script>  
  14.     <script src="https://kendo.cdn.telerik.com/2018.1.117/js/jszip.min.js"></script>  
  15.     <script src="https://kendo.cdn.telerik.com/2018.1.117/js/kendo.all.min.js"></script>  
  16. </head>  
  17. <body>  
  18.       
  19.     <input id="autocomplete" />  
  20.   
  21.     <script>  
  22.         $("#autocomplete").kendoAutoComplete({  
  23.           filter: "startswith",  
  24.           dataSource: {  
  25.             data: ["Orange", "Grapes", "Apple", "Freet"]  
  26.           },  
  27.         
  28.   
  29.         });  
  30.     </script>  
  31.   
  32.   
  33. </body>  
  34. </html>  

Right now, we have a filter in Kendo autocomplete with a startwith operator. The list is going to be filter based on the starting character

Kendo AutoComplete Control



AutoComplete with Filter - startswith

 
Now let’s operate with a different operator, that means if my startwith operator is not returning a value then I need to go with contains operator for filtering the data.

AutoComplete with multiple filter

AutoComplete.html
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4.     <meta charset="utf-8">  
  5.     <title>Untitled</title>  
  6.   
  7.     <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.1.117/styles/kendo.common.min.css">  
  8.     <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.1.117/styles/kendo.rtl.min.css">  
  9.     <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.1.117/styles/kendo.default.min.css">  
  10.     <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.1.117/styles/kendo.mobile.all.min.css">  
  11.   
  12.     <script src="https://code.jquery.com/jquery-1.12.3.min.js"></script>  
  13.     <script src="https://kendo.cdn.telerik.com/2018.1.117/js/angular.min.js"></script>  
  14.     <script src="https://kendo.cdn.telerik.com/2018.1.117/js/jszip.min.js"></script>  
  15.     <script src="https://kendo.cdn.telerik.com/2018.1.117/js/kendo.all.min.js"></script>  
  16. </head>  
  17. <body>  
  18.       
  19.     <input id="autocomplete" />  
  20.   
  21.     <script>  
  22.             var setContains = function(e) {  
  23.                 $("#autocomplete").data("kendoAutoComplete").setOptions({ filter: "contains" });  
  24.                   
  25.             };  
  26.   
  27.             var setStart = function(e) {  
  28.                 $("#autocomplete").data("kendoAutoComplete").setOptions({ filter: "startswith" });  
  29.                   
  30.             };  
  31.   
  32.              
  33.             $("#autocomplete").keyup(function(e) {  
  34.             setStart()  
  35.             setTimeout(function(){  
  36.             if($('.k-list').children().length == 0)  
  37.                 {  
  38.                     setContains();  
  39.                       
  40.                     $("#autocomplete").data("kendoAutoComplete").search($('#autocomplete').val());  
  41.                 }  
  42.             }, 500);  
  43.   
  44. });  
  45.   
  46.         $("#autocomplete").kendoAutoComplete({  
  47.           filter: "startswith",  
  48.           dataSource: {  
  49.             data: ["Orange", "Grapes", "Apple", "Freet"]  
  50.           },  
  51.         
  52.   
  53.         });  
  54.     </script>  
  55.   
  56.   
  57. </body>  
  58. </html>  

From the above code it is clear the we are setting a filter operator based on the k-list children length in the keyup event

setContains – Used to set the contains operator for filter using setOption function

setStart- Used to set the startswith operator for filter using setOption function


From the above figure you can notice based on input “e” it will check for the item which starts with e in the list of item, if there is no item then the operator changes to contain and return a list which contains a letter e.

I hope you have learned from this blog. Your valuable feedback, questions, or comments about this blog are always welcome.
Next Recommended Reading Autocomplete Textbox Using jQuery AJAX With Database In ASP.NET