如何使用自動完成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) { 
      //.... 
     } 
    }); 
}