wie Autocomplete jquery für 3 gleiche Klasse verwenden

Question

ich verwendet jqueryui Autocomplete iwant die gleiche Arbeit für einige Eingabe Text aber wenn ich $ (this) .val() für senden Wert von Textfeld verwenden es Fehler anzeigen und wenn ich (".Degree") val() zeigt und an den Server zuerst Textbox senden es falsch

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

      } 
     }); 
    } 

wenn ich benutzen. $(this).val();

elem.nodeName undefiniert ist

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

wie kann ich es beheben

Answer 1

this auf Ajax-Objekt im Inneren bezieht. Speichern Sie die this Referenz, bevor Sie sie im internen Bereich verwenden.

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: geprüft Gerade jquery UI doc Sie request.term das ist es verwendet werden soll.

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