Jqueryオートコンプリートが正しく動作しない

Question

私はjqueryオートコンプリートを使用しています。私のケースでは、私のページに複数のオートコンプリートのテキストボックスと非表示のフィールドがあります。 例えば

<input class='myclass' type='text'> </input> 
<input class='.emp_num_hidden' type='hidden'> </input> 
<input class='myclass' type='text'> </input> 
<input class='.emp_num_hidden' type='hidden'> </input> 

のように...

私は、隠しフィールドの変更イベントを発生時にそれが発生し、複数の時間 は、以下の私のコードです：

$(".myclass").each(function() { 

var $empName= $(this); 
var $empNumber = $empName.next('input:hidden'); 
//things to do 
//Setting variable e.g url... 

$empName.autocomplete(url,{ 

//code... 

}).result(function(event,data,formatted) 
{ 
$empNumber.val(formatted).change(); 
}); 
}); 

上記のコードで$ empNumberは、オートコンプリート値を格納するために使用される隠しフィールドを保持します。つまり、 オートコンプリートからテキストを選択すると、その選択した従業員番号は隠しフィールドに格納されます。 この隠しフィールドの値に基づいて、私は彼の 従業員番号に基づいて従業員の詳細を返すajaxコールを行いたいと思います。 私は以下のように隠しフィールドのイベントを変更するために手書きを書いています。

$(.emp_num_hidden).on('change',function (

)}; 

ここで、 'emp_num_hidden'は、非表示フィールドのクラスです。

隠しフィールドの変更で複数のイベントが発生しないようにするにはどうすればよいかお勧めします。

Answer 1

これは$(this)オブジェクトを使用して行われます。 changeイベントにはターゲットがあるため、1つの要素にしか影響しません。この要素に対してコールバック関数が実行されています（this）。たとえば：

$(".emp_num_hidden").on('change', function (e){ 
    alert($(this).val()); 
}); 

は何が起こるだろうことは隠しフィールドはそれだけで隠しフィールドから従業員番号を含む、変更されたときに警告ウィンドウが表示されるということです。また、コードにいくつか修正が加えられていることに気づくでしょう。

個人的には、私はidとclassの両方の属性をオブジェクトに使用します。これにより、セレクタには広い範囲と狭い範囲が与えられます。

例：

HTML

<input class='myclass' type='text' id='entry-txt-1' /> 
<input class='emp_num_hidden' type='hidden' id='hide-txt-1' /> 
<input class='myclass' type='text' id='entry-txt-2' /> 
<input class='emp_num_hidden' type='hidden' id='hide-txt-2' /> 

jQueryの

ビット、さらにこれを取る

$(function(){ 
    var $empName, $empNumber; 

    $(".myclass").each(function(key, el) { 
    $empName= $(el); 
    $empNumber = $empName.next("input[type='hidden']"); 
    // things to do 
    // Setting variable e.g url... 
    $empName.autocomplete(url, { 
     //code... 
    }).result(function(e, d, f){ 
     $empNumber.val(f).change(); 
    }); 
    }); 
    $(".emp_num_hidden").on('change', function(e){ 
    var empId = $(this).attr("id"); 
    var $employeeNumberField = $("#" + empId); 
    // Do the needful... 
    }); 
}); 

、あなたはデータ属性を利用して検討する必要があります。また、オートコンプリート用のselectイベントもご覧ください。以下のような何か：

$(function(){ 
    $(".myclass").autocomplete({ 
    source: url, 
    select: function(e, ui){ 
     $(this).val(ui.item.label); 
     $(this).data("emp-number", ui.item.value); 
     $.post("employeedata.php", { n: ui.item.value }, function(data){ 
     $("#empData").html(data); 
     }); 
     return false; 
    } 
    }); 
}); 

これはurlはlabelとvalueプロパティを持つ配列オブジェクトを返すことを前提としています。これにより、ユーザーが選択したフィールドに従業員番号がdata-emp-number属性として追加されます。 labelは従業員名、valueは従業員番号です。このコールバックを使用して、従業員番号に基づいて他のすべての従業員データを表示することもできます。

作業例：あなたの助けをhttps://jsfiddle.net/Twisty/zmevd0r0/