Semantic UI - Suche automatische Vervollständigung mit Dynamik Eingang

Question

Probleme mit Semantic UI Autocomplete haben.

Ich habe einen Eingang mit der SEMANTIC UISuche zum automatischen Vervollständigung, die großen Werke aber, wenn im Versuch, das gleiche Skript mit dynamischen Eingängen zu verwenden, die zum automatischen Vervollständigung überhaupt nicht funktioniert.

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> 

Semantische Suche 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

Wenn Sie versuchen, replizieren Sie die vorhandene Sucheingabe, können Sie JQuery .Clone() Methode verwenden. Ich habe unten einen Beispielcode für Ihre Referenz erstellt. Sie können es immer noch zu einem anspruchsvolleren Code überarbeiten, aber meine Idee hier ist, eine tiefe Kopie der vorhandenen Sucheingabe zu machen.

Beachten Sie, dass ich der neuen Sucheingabe eine eindeutige Klasse zugewiesen habe. Dies dient dazu, unnötiges Verhalten in den neu erzeugten Objekten zu vermeiden.

$(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>