jQuery 자동 완성 안쪽에 $ (this)가 없습니다.

링크 1과 같이 자동 완성 기능을 사용하는 MVC 애플리케이션이 있습니다. 그런 다음, 디스플레이를 포맷 할 수 있도록,이 JSON 스키마 복잡한 JSON 개체를 통과했다 :

{ 
    "name": "searchResults", 
    "properties": { 
     "Id": { 
      "type": "number", 
      "description": "Table.ID, maps to value", 
      "required": true 
     }, 
     "Name": { 
      "type": "string", 
      "description": "Display name, maps to label", 
      "required": true 
     }, 
     "Type": { 
      "type": "number", 
      "description": "Table selector (enum)", 
      "required": true 
     } 
    } 
}

문제는 내가 $.ajax 함수 내에서 $(this)을 사용할 수 없다는 것입니다. 컨텍스트를 사용하여 시도했지만 작동하지 않습니다. "SyntaxError : 예기치 않은 토큰 <"을 계속 수신합니다. 여기

$(function() { 
    $('*[data-autocomplete-url]').each(function() { 
    $(this).autocomplete({ 
     source: function (request, response) { 
     $.ajax({ 
      // THIS WORKS! 
      //url: $('*[data-autocomplete-url]').data('autocomplete-url'), 
      // THIS DOESN'T WORK! 
      url: $(this).data('autocomplete-url'), 
      dataType: "json", 
      contentType: 'application/json, charset=utf-8', 
      data: { 
      token: $("#tags").val() 
      }, 
      success: function (data) { 
      response($.map(data, function (item) { 
       return { 
       label: item.Name, 
       value: item.Id 
       }; 
      })); 
      }, 
      error: function (xhr, status, error) { 
      alert(error); 
      } 
     }); 
     }, 
     select: function (event, ui) { 
     $("#tags").val(ui.item.label); 
     $("#tagsId").val(ui.item.value); 
     event.preventDefault(); 
     }, 
     focus: function (event, ui) { 
     $("#tags").val(ui.item.label); 
     event.preventDefault(); 
     }, 
     minLength: 3 
    }); 
    }); 
});

는 면도기 니펫을한다 :

<div class="ui-widget"> 
    <label for="tags">Tags: </label> 
    <input id="tags" data-autocomplete-url="@Url.Action("Search", "Search")" /> 
    <input id="tagsId" hidden="hidden" /> 
</div>

조치를 발사에 대한 책임을 특정 자동 완성 요소를 얻을 수 $(this)를 사용하는 방법이 있나요 여기에 자바 스크립트 코드는?

참조 :

ASP.NET MVC & jQuery UI autocomplete

출처

2014-05-15 Marlos

AJAX 기능 this 행함에 그것은 요소의 참조 범위를 갖고 있지 않기 때문에.

var url = $(this).data('autocomplete-url');

와 아약스 호출 사용

그 변수 :

url:url

출처

2014-05-15 14:20:09

문제가 없습니다. 아약스 메소드에 대해서'this'가 요소를 참조하지 않고 플러그인 자체에 대해'this'로 설정된 컨텍스트 옵션을 사용하면 안된다. AFAIK –

@A.Wolff가 말한 것처럼'context'는 동작하지 않는다. . 그러나 변수를 사용하면됩니다. – Marlos

그것을 고쳐 주셔서 감사합니다 .. –

이 each 루프 내부에 폐쇄 변수를 사용하거나 요소를 얻을

당신은 아약스 요청을하기 전에 본의 사본을 저장해야 내부 사용 source 콜백 방식 :

url: $(this.element).data('autocomplete-url'),

출처

2014-05-15 14:29:16

jQuery 자동 완성 안쪽에 $ (this)가 없습니다.

답변

관련 문제