JSFiddle - React, Tailwind, and code Playground

by burkeholland

HTML

<script src="http://cdn.kendostatic.com/2012.3.1114/js/kendo.all.min.js"></script>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.3.1114/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.3.1114/styles/kendo.default.min.css">
<div class="wrapper">
    <p><b>List: </b>Korchev", "Brandon", "Todd", "Derick", "Rob", "Ryan", "Burke"</p>
    <p>
        <input id="people">
    </p>
</div>

CSS

.wrapper {
    width: 500px;
    margin: auto;
    padding-top: 20px;
}

JavaScript

var people = [ "Korchev", "Brandon", "Todd", "Derick", "Rob", "Ryan", "Burke" ];
          
// create a datasource bound to the local data         
var peopleDS = new kendo.data.DataSource({ data: people });

var autoComplete = $("#people").kendoAutoComplete({
  minLength: 3,
  separator: ", ",
  dataSource: {
      transport: {
          read: function(options) {

              // call the paramterMap passing in the key/value options
              this.parameterMap(options.data);

              // read from the local datasource
              peopleDS.read();

              // filter the local datasource
              peopleDS.filter({ logic: "and", 
                                filters: options.data.filter.filters });

              // pass the result of the local data source to the options
              // success method
              options.success(peopleDS.view());
          },
          parameterMap: function (data) {
              
              // split the values into an array
              values = autoComplete.value().split(autoComplete.options.separator);

              // pop off the last one as its not a selected value
              values.pop();

              // loop through the selected values and add them to
              // the filter criteria to be sent to the server
              $.each(values, function(index, item) {
              data.filter.filters.push({ field: "", 
                                         ignoreCase: true, 
                                         operator: "neq", 
                                         value: item });
              });

              return data;
          }
      },
      serverFiltering: true
  }
}).data("kendoAutoComplete");