javascript - Kendo 自动完成 Jquery 插件错误

Question

我的 HTML 是

  <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"/>

我的 JQuery 脚本

   $(".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);
            }
    });

我的问题是:

在前面的代码中，我无法访问 parameterMap 函数中的 $(this) 对象，因此我需要访问当前对象并且无法更改JQuery 选择器('.autocompelete')并且我无法使用 Id 选择器...任何想法

Answer 1

使用闭包:

$(".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);
       }
   });
});