语义 UI - 使用动态输入搜索自动完成

Question

语义 UI 自动完成有一些问题。

我有一个输入 SEMANTIC UI search autocomplete 效果很好但是当我尝试使用相同的带有动态输入的脚本自动完成根本不起作用。

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>

语义搜索脚本

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

   $("#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() 方法。我在下面创建了一个示例代码供您参考。您仍然可以将其修改为更复杂的代码，但我的想法是对现有搜索输入进行深度复制。

请注意，我已经为新的搜索输入指定了唯一的 class。这是为了避免在新创建的对象中出现不必要的行为。

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

语义 UI - 使用动态输入搜索自动完成

Semantic UI - search autocomplete with dynamics input

javascript

jquery

autocomplete

semantic-ui

laravel-5.2