Kendo AutoComplete Jquery Plugin Error

Question

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

Answer 1

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);
       }
   });
});

Answer 2

Try to change:

var DataItem = $(this).dataItem(e.item.index());

to:

var DataItem = this.dataItem(e.item.index());