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

私はこれのビットが必要であったどの全くわからないんだけど、グループとして、彼らは問題を解決するためにタイトな十分なスコープを使用して周りのコードをmanhandle。

Answer 1

変数に$（this）を保存し、パラメータ（locNode）として関数に渡します（初期化中）。また、$（this）の代わりにコンテナ要素へのリンクを渡すことができるので、初期化された各オートコンプリートはその親を知ることになります。

更新：以下はオートコンプリートの初期化の観点から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); 
     } 
    ); 
    } 
    }); 
} 

を渡す方法

のinit：

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

新しいがcurrentThisの値がlocPrep有望な音