Search code examples
javascriptjquerykendo-uikendo-autocomplete

Kendo AutoComplete Jquery Plugin Error


My Html is

  <input type="text" id="id-5505Name" name="id-5505Name" value=" "  class="autocomplete"/> 
  <input type="text" id="id-2333Name" name="id-2333Name" value=" "  class="autocomplete"/>
  <input type="text" id="id-2323Name" name="id-2323Name" value=" "  class="autocomplete"/>
  <input type="text" id="id-2322Name" name="id-2322Name" value=" "  class="autocomplete"/>

My JQuery Script

   $(".autocomplete").kendoAutoComplete({
        minLength: 2, ignoreCase: true, placeholder: "Start typing...",
        filter: 'contains', suggest: true,
        dataTextField: "name",
        dataValueField: 'id',
        dataSource: {
            type: "json",
            serverFiltering: true,
            transport: {
                read: "PatientFileUpload/loaddrugname", parameterMap: function () { 
                    return {
                        startsWith: $(this).data("kendoAutoComplete").value()
                    };
                },
                success: function (response) {
                    o.success(response);
                }
            }
        }, select: function (e) {
            var item = e.item;
            var DataItem = this.dataItem(e.item.index());
            alert('Name : ' + DataItem.name + ', Id : ' + DataItem.id);
            }
    });

My problem is :

In the previous code i can't access $(this) object in the parameterMap function ,so I need to access the current object and I can't change the JQuery selector ('.autocompelete') and I Can't use The Id selector... Any ideas


Solution

  • Use a closure:

    $(".autocomplete").each(function() {
        var that = this;
    
        $(this).kendoAutoComplete({
           minLength: 2,
           ignoreCase: true,
           placeholder: "Start typing...",
           filter: 'contains',
           suggest: true,
           dataTextField: "name",
           dataValueField: 'id',
           dataSource: {
               type: "json",
               serverFiltering: true,
               transport: {
                   read: "PatientFileUpload/loaddrugname",
                   parameterMap: function () {
                       return {
                           startsWith: $(that).data("kendoAutoComplete").value()
                       };
                   },
                   success: function (response) {
                       o.success(response);
                   }
               }
           },
           select: function (e) {
               var item = e.item;
               var DataItem = this.dataItem(e.item.index());
               alert('Name : ' + DataItem.name + ', Id : ' + DataItem.id);
           }
       });
    });