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>

语义搜索脚本

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

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

＆＃13;

$(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', '');
   });
});

＆＃13;

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

＆＃13;

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

1 个答案: