JQuery 자동 완성 - ID를 사용하지 않고 근처 DOM 요소를 기반으로 목록을 제어하려면 어떻게해야합니까?

Question

이것은 JQuery에 있으며 JQuery-UI 버전의 자동 완성을 사용합니다.

저는 약간의 단점이 있습니다. 저는 무한정 복제 가능해야하는 양식 안에서 작업하고 있습니다. 따라서 ID 태그를 고유 한 식별에 사용할 수 없으며, 맨 위에서 아래로 검색하여 내가 작업중인 DOM 요소처럼 보이는 것을 찾을 수 없습니다 - 상대 함수 (.closest, .find 등)를 사용해야합니다. 이 양식 안에는 국가 필드, 상태 필드 및 위치 필드가있는 설정이 있으며 위치 필드는 국가 및 상태 필드의 현재 값을 전달하는 링크에서 제공되는 자동 완성으로되어 있습니다. 링크에서 서버 측 필터링을 수행합니다. 소스 함수의 $ (이) locNode하지 않기 때문에 작동하지 않는 것을 제외하고

function locPrep(locNode) { 
    $locNode.autocomplete({ 
    source: function (request, response) { 
     $locDiv = $(this).closest("div.locWrapper"); 
     $stateNode = $locDiv.find("input.state"); 
     $countryNode = $locDiv.find("input.country"); 
     $.post("/FormHost/AutocompleteLocList", 
     {state:$stateNode.val(), country:$countryNode.val(), term:request.term }, 
     function (data) { 
      response(data); 
     } 
    ); 
    } 
    }); 
} 

..., 나는 할 수 없습니다 : 나는 이런 식으로 뭔가를 갈 같은 을 거라고 locPrep가 반복적으로 호출되기 때문에 바깥 쪽을 선언하고 내부에서 사용하기 만하면 양식의 자동 완성마다 한 번씩 호출됩니다. 이것을 시도하면 Jquery가 모든 것을 글로벌하게한다는 사실은 양식의 모든 자동 완성이 국가 및 국가 필드를 마지막으로 참조하도록 만듭니다. 나는 범위 지정 문제를 해결하기 위해 javascript vars를 사용하여 시도했지만 이상하게 파열되었습니다. 누구든지 도와 줄 수 있습니까?

---

편집 : 드미트리 Naumov의 종류의 지원 덕분에, 나는 (나는 아직도 완전히 확실하지 않다하지만 작동하는 이유는 않았다 내가하려고하는 일의 일부를 주어진 기능 솔루션을 함께 망치 할 수 있었다 아니). 나중에 다른 사람을 도울 수 있기를 희망하는 코드를 포함시키고있다. (필자는 다른 사람들의 대답에 대해 많은 질문을 던졌습니다.)

먼저 locPrep (foo);에서 함수를 호출 한 모든 인스턴스를 살펴보고 변경했습니다. "새로운 locPrep (foo);" 또한 locNode 대신 locDiv를 사용하도록 변경했습니다. 그런 다음 코드를 다음과 같이 변경했습니다 (다소 단순화 된 버전 임에도 불구하고).

function locPrep(locDiv) { 
    $locNode = $(locDiv).find("input.locationAutofill") 
    $locNode.autocomplete({ 
    source: function (request, response) { 
     var stateVar = $(locDiv).find("input.state").val(); 
     var countryVar = $(locDiv).find("input.country").val(); 
     $.post("/FormHost/AutocompleteLocList", 
     {state:stateVar, country:countryVar, term:request.term }, 
     function (data) { 
      response(data); 
     } 
    ); 
    } 
    }); 
} 

나는 전적의 비트가 필요했지만, 그룹으로 그들이 문제를 해결하기 위해 꽉 충분한 범위 지정을 사용하여 주변의 코드를 인력으로 움직 확실하지 않다.

Answer 1

변수에 $ (this)를 저장하고 매개 변수 (locNode)를 함수에 (초기화 중에) 전달하십시오. 또한 $ (this) 대신 container 요소에 대한 링크를 전달할 수 있으므로 초기화 된 각 자동 완성은 해당 부모를 알 수 있습니다.

업데이트 : 다음은 자동 완성 초기화면에서 100 % 정확하지 않을 수 있지만 고체 그림 방법 <div id="myDiv1">에 locPrep의 2 고유의 인스턴스를 생성하고 <div id="myDiv2">

myContainer1 = $('#myDiv1'); 
myContainer2 = $('#myDiv2'); 

myAutocompleteInstance1 = new locPrep(myContainer1); 
myAutocompleteInstance2 = new locPrep(myContainer2); 

갱신 2 : 전달 방법

function locPrep(locNode, currentThis) { 

/// use currentThis instead of $(this) inside locPrep function 

    $locNode.autocomplete({ 
    source: function (request, response) { 
     $locDiv = currentThis.closest("div.locWrapper"); 
     $stateNode = $locDiv.find("input.state"); 
     $countryNode = $locDiv.find("input.country"); 
     $.post("/FormHost/AutocompleteLocList", 
     {state:$stateNode.val(), country:$countryNode.val(), term:request.term }, 
     function (data) { 
      response(data); 
     } 
    ); 
    } 
    }); 
} 

초기화 :

myAutocompleteInstance1 = new locPrep(myContainer1, $(this)); 

새로운이 currentThis의 값이 locPrep 유망 소리