ダイナミックDOMを使用してkeyupで右端に.valを追加

Question

jsonで入力フィールドを入力して検索しようとすると問題が発生します。 1つのフィールドに対してのみ機能し、結果を選択すると、すべてのフィールドに追加されます。

$('#add-row').on('click', function() { 
      var row = $('.empty-row.screen-reader-text').clone(true); 
      row.removeClass('empty-row screen-reader-text'); 
      row.insertBefore('#repeatable-fieldset-one tbody>tr:last'); 
      return false; 
     }); 

$('.remove-row').on('click', function() { 
     $(this).parents('tr').remove(); 
     return false; 
}); 

私のHTML構造：

私は新しい行を追加

 <?php 
    if ($repeatable_fields) : 
     foreach ($repeatable_fields as $field) { ?> 
      <tr> 
       <td> 
        <input class="searchterm" type="text" class="widefat" name="name[]" value="existing value" /> 
       </td> 
       <td><a class="button remove-row" href="#">Remove</a></td> 

      </tr> 
      <?php 
     } 
     else : 
     //show a blank one 
     ?> 
     <tr> 
      <td> 
       <input class="searchterm" type="text" class="widefat" name="name[]" /> 
      </td> 
      <td><a class="button remove-row" href="#">Remove</a></td> 
     </tr> 
    <?php endif; ?> 

    <!-- empty hidden one for jQuery --> 
    <tr class="empty-row screen-reader-text"> 
     <td> 
      <input class="searchterm" type="text" class="widefat" name="name[]" /> 
     </td> 
     <td><a class="button remove-row" href="#">Remove</a></td> 
    </tr> 

これは正常に動作しますが、私はいくつかのフィールドを持っている場合には、同じ値を持つすべてのフィールドを埋めます。私は.valをすべて.searchtermに設定したことを理解しています。 しかし、私はそれを管理する方法を知ることができません...

結果を選択するときは、それぞれの入力のために入力して新しい結果を得る必要があります。

jQuery(document).ready(function(){ 

     jQuery(".searchterm").live('keyup', function(e) { 
     var q = jQuery('.searchterm').val(); 
     var regex = new RegExp(q, "i"); 

     jQuery.getJSON("s_json.json", 
     { 
      srsearch: regex, 
      action: "query", 
      list: "search", 
      format: "json" 
     }, 
     function(data) { 
     jQuery("#results").empty(); 
     jQuery("#results").append("Results for <b>" + q + "</b>"); 
     //console.log(data); 

     jQuery.each(data, function(i,item){ 
     if ((item.name.search(regex) != -1) || (item.ticker.search(regex) != -1)) { 
      //console.log(item); 
      jQuery("#results").append('<a class="result" data-value="' + item.ticker + '">' + item.ticker + '/' + item.name + '<a>'); 
     } 
    }); 
    }); 
    }); 

     jQuery('#results a').live('click', function() { 
     var value = jQuery(this).attr("data-value"); 
     var input = jQuery('.searchterm'); 
     input.val(value); 
     jQuery("#results").empty(); 
     return false; 
    }); 


    }); 

Answer 1

私はここで "フォーカス" に結果

をトリックを追加しました：

 $('body').on('focus',".searchterm", function(){ 
     var curSearchItem = null; 
     jQuery(this).live('keyup', function(e) { 
      var q = jQuery(this).val(); 
      var regex = new RegExp(q, "i"); 
      curSearchItem = jQuery(this); 
      jQuery.getJSON("s_json.json", 
      { 
      srsearch: regex, 
      action: "query", 
      list: "search", 
      format: "json" 
      }, 
      function(data) { 
      jQuery("#results").empty(); 
      jQuery("#results").append("Results for <b>" + q + "</b>"); 

      jQuery.each(data, function(i,item){ 
      if ((item.name.search(regex) != -1) || (item.ticker.search(regex) != -1)) { 
       jQuery("#results").append('<a class="resul" data-value="' + item.ticker + '">' + item.ticker + '/' + item.name + '<a>'); 
      } 
      }); 
      }); 
     }); 
     jQuery('#results a').live('click', function() { 
     var value = jQuery(this).attr("data-value"); 
     if (curSearchItem) { 
      curSearchItem.val(value); 
      jQuery("#results").empty(); 
     } 
     curSearchItem = null; 
     return false; 

     }); 
     }); 

Answer 2

私が見る迅速な問題を回避するには、変数に現在の".searchterm"のアイテムを格納することです：

jQuery(document).ready(function(){ 

    var curSearchItem = null; 

    jQuery(".searchterm").live('keyup', function(e) { 
     var q = jQuery('.searchterm').val(); 
     var regex = new RegExp(q, "i"); 

     // here, you store your item here 
     curSearchItem = jQuery(this); 

     // other code unchanged 

    }); 

    jQuery('#results a').live('click', function() { 
     var value = jQuery(this).attr("data-value"); 
     // instead of `input` - use `curSearchItem` 
     if (curSearchItem) { 
      curSearchItem.val(value); 
      jQuery("#results").empty(); 
     } 
     return false; 
    }); 
}); 

より複雑なオプションは、各.searchitemにIDを割り当て、このidを保存するが、それはより多くの属性を作ることができますあなたの.searchitemについてはまだ論理は同じです - 保存されたアイテムを見つけるid。だから、.searchitem自体を保存する方が簡単だと思います。 u_mulder助けを借りて