3つの同じクラスのオートコンプリートjqueryを使用する方法

Question

私はjqueryuiオートコンプリートをいくつかの入力テキストに対して使用します しかし、私は$（this）.val（）をテキストボックスの送信値として使用するとエラーを表示します。 "゜"）の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は

012を定義されていません

私はそれを修正することができますどのように

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

    } 
}); 

EDIT： はちょうどあなたがrequest.termのthatsにそれを使用する必要がありますjquery UI doc をチェックします。

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