如何使用自动完成jQuery的3个相同的类

Question

我用jqueryui自动完成iwant是一些输入文本相同的工作 但当我使用$（this）.val（）发送文本框的值它显示错误，当我使用“.Degree”）VAL（）节目和发送到服务器第一个文本框它不正确

function DegreeAutoComplete() { 

     $(".Degree").autocomplete({ 

      position: { my: "right top", at: "right bottom", collision: "none" }, 
      source: function (request, response) { 

       var spin = $(".spinnerDegree"); 
       spin.addClass("fa-spin fa-spinner"); 

       $.ajax({ 
        url: "@Url.Action("GetDegree")", 
        type: "POST", 
        dataType: "json", 
        data: { search: $(".Degree").val() }, 
        success: function (data) { 

         spin.removeClass("fa-spin fa-spinner"); 
         response($.map(data, function (item) { 
          return { label: item.PersianName, value: item.PersianName, id: item.Id }; 
         })); 

        } 
       }); 
      }, 
      messages: { 
       noResults: '', 
       results: function (resultsCount) { } 
      }, 
      select: function (event, ui) { 

       // ui.item.value contains the id of the selected label 
       alert($(this).val()); 
       $(this).attr("sel", ui.item.id); 

      } 
     }); 
    } 

当我使用：$(this).val();

elem.nodeName是不确定的

hooks = jQuery.valHooks[ elem.type ] || jQuery.valHooks[elem.nodeName.toLowerCa... 

如何解决它

Answer 1

this是指在其内部Ajax对象。保存this参考，然后在内部范围内使用它。

var spin = $(".spinnerDegree"); 
spin.addClass("fa-spin fa-spinner"); 
var $that = $(this);// save reference 
$.ajax({ 
    url: "@Url.Action(" 
    GetDegree ")", 
    type: "POST", 
    dataType: "json", 
    data: { search: $that.val() },//use $that var here 
    success: function(data) { 

     spin.removeClass("fa-spin fa-spinner"); 
     response($.map(data, function(item) { 
      return { label: item.PersianName, value: item.PersianName, id: item.Id }; 
     })); 

    } 
}); 

编辑： 刚才检查jquery UI doc 您应该使用request.term完蛋了。

source: function(request, response) { 
    $.ajax({ 
     url: "@Url.Action("GetDegree")", 
     type: "POST", 
     dataType: "json", 
     data: { 
      search: request.term 
     }, 
     success: function(data) { 
      //.... 
     } 
    }); 
}