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">
    <h3>Netflix Movie Search</h3>
    <p>
        <input id="titles">
    </p>
</div>

CSS

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

JavaScript

$("#titles").kendoAutoComplete({
  minLength: 3,
  dataTextField: "Name",
  separator: ", ",
  dataSource: {
    type: "odata",
    serverFiltering: true,
    serverPaging: true,
    pageSize: 25,
    transport: {
      read: "http://odata.netflix.com/Catalog/Titles",
      parameterMap: function(data, type) {
        
        // get a reference to the autocomplete
         var autoComplete = $("#titles").data("kendoAutoComplete");
        
        // split the values into an array
        values = autoComplete.value().split(", ");
        
        // 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: "Name", ignoreCase: true, 
                                        operator: "neq", value: item });
        });
        
        // convert the options to odata for netflix. for normal json,
        // just return options
        return kendo.data.transports.odata.parameterMap(data);
      }
    }
  }
}).data("kendoAutoComplete");