セマンティックUI - ダイナミックス入力によるオートコンプリートの入力

Question

セマンティックUIのオートコンプリートに問題があります。

私はダイナミック入力でオートコンプリートを同じスクリプトを使用しようとイムがまったく機能していないとき、素晴らしい作品が、SEMANTIC UI検索オートコンプリートで入力を持っています。

HTML

<div class="ui search" id="tag"> 
     <div class="ui icon input"> 
     <input style="width:400px;" class="prompt" type="text" name="tag[]"> 
      <i class="search icon"></i> 
     </div> 
     <div class="results"></div> 
</div> 
<button type="button" id="create-tags" class="ui primary tiny button">Add Tag</button> 
<div id="dynamic"></div> 

セマンティック検索SCRIPT

$(document).ready(function() { 
    $('#tag').search({ 
     apiSettings: { 
      url: '/autocomplete/{query}', 
      onResponse: function(results) { 
       var response = { 
        results : [] 
       }; 
       $.each(results, function(index, item) { 
        response.results.push({ 
         title  : item.name, 
         description : item.description 
         //url  : item.html_url 
        }); 
       }); 
       return response; 
      }, 
     }, 
      minCharacters : 3, 
    }); 
}); 

DYNAMIC INPUTS

$(document).ready(function(){ 

    $("#create-tags").click(function(e){ 
    $("#dynamic").append('<div class="ui search" id="tag"><div class="ui icon input"><input style="width:400px;" class="prompt" type="text" name="tag[]" placeholder="Busqueda autocompletado para personajes"></div><div class="results"></div></div>'); 
    }); 
}); 

Answer 1

あなたがしようとしている場合既存の検索入力を複製するには、JQuery .clone（）メソッドを使用できます。私はあなたの参照のためのサンプルコードを作成しました。より洗練されたコードに変更することはできますが、私の考えは既存の検索入力を詳細にコピーすることです。

新しい検索入力には一意のクラスが割り当てられています。これは、新しく作成されたオブジェクトで不要な動作が発生しないようにするためです。

$(document).ready(function() { 
 
    $('#tag').search({ 
 
     apiSettings: { 
 
      url: '/autocomplete/{query}', 
 
      onResponse: function(results) { 
 
       var response = { 
 
        results : [] 
 
       }; 
 
       $.each(results, function(index, item) { 
 
        response.results.push({ 
 
         title  : item.name, 
 
         description : item.description 
 
         //url  : item.html_url 
 
        }); 
 
       }); 
 
       return response; 
 
      }, 
 
     }, 
 
      minCharacters : 3, 
 
    }); 
 
}); 
 

 
$(document).ready(function(){ 
 
    var ctr_ = 0; 
 
    $("#create-tags").click(function(e){ 
 
    ctr_++; 
 
    var unique_id = 'tag'+ ctr_; 
 
    $("#dynamic").append($('#tag').clone().addClass(unique_id)); 
 
    $('.'+ unique_id).search({ 
 
     apiSettings: { 
 
      url: '/autocomplete/{query}', 
 
      onResponse: function(results) { 
 
       var response = { 
 
        results : [] 
 
       }; 
 
       $.each(results, function(index, item) { 
 
        response.results.push({ 
 
         title  : item.name, 
 
         description : item.description 
 
         //url  : item.html_url 
 
        }); 
 
       }); 
 
       return response; 
 
      }, 
 
     }, 
 
      minCharacters : 3, 
 
    }).search('set value', ''); 
 
    }); 
 
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> 
 
<link href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/1.11.8/semantic.min.css" rel="stylesheet"/> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/1.11.8/semantic.min.js"></script> 
 
<div class="ui search" id="tag"> 
 
     <div class="ui icon input"> 
 
     <input style="width:400px;" class="prompt" type="text" name="tag[]"> 
 
      <i class="search icon"></i> 
 
     </div> 
 
     <div class="results"></div> 
 
</div> 
 
<button type="button" id="create-tags" class="ui primary tiny button">Add Tag</button> 
 
<div id="dynamic"></div>