Question

我正在编写一个带有动态typeaheads字段的表单，当我想显示并选择建议时，我发现了一个问题。我有两个第一个字段，一个输入选择和一个输入类型。选择某个选项后，它会在输入预先输入中加载值列表。当我创建（动态）这对字段的克隆并且我想获得正确的typeahead中的值列表时，问题就来了。当我在该字段中聚焦时，我获得了该字段的id（idTypeAhead），并且我在typeahead中使用它。这是代码：

//TYPEAHEAD 
$('input.typeahead').focus(function(){
    idTypeAhead = parseInt($(this).attr('id').replace('typeAhead_',''));
    selectAttr = $('select#selectAttr_'+idTypeAhead).find('option:selected').val();
    if(selectAttr=="null"){
        selectAttr=0;
    }       
});

$("input#typeAhead_"+idTypeAhead).on("typeahead:select").typeahead({
        name:'input#typeAhead_'+idTypeAhead,
        displayKey: 'input#typeAhead_'+idTypeAhead,
        input: 'input#typeAhead_'+idTypeAhead,
        container:'input#typeAhead_'+idTypeAhead,
        display: $(this),
        suggestion: $(this),
        minLength : 1, 
        sorter : this.query,
        source : function(query, process){
            return $.ajax({
            url:'/aplicaciones/jsonValorAttr?selectAttr='+selectAttr,
            dataType: 'json',
            type:'POST',
            success: function(data){                    
                states = [];     
                map = {};  
              $.each(data, function (i, state) {         
                    map[state] = state;         
                    states.push(state); 
                    });       
            process(states);
            }
          });
        }
      });

我有这个代码的形式（我使用Spring STS）。我还有两个按钮＆＃34; +＆＃34;和＆＃34; - ＆＃34;。当我点击＆＃34; +＆＃34;时，我克隆这两个字段并增加每个元素的de id号。当我点击＆＃34; - ＆＃34;时，我删除了一对字段。（例如：selectAttr_101 - ＆gt; newclone：selectAttr_102）。

<div class="controls">
        <form:select path="rolHerramientaID" id="selectAttr_101" cssClass="field-required lstAtributos" cssErrorClass="select-error">
        <form:option value="null" selected=""><spring:message code="altaAplicacion.form.seleccionar" />
        </form:option>
        <c:forEach var="selectAtributos" items="${resultAtributos}" varStatus="rowCount">
        <form:option value="${selectAtributos.atributosId}">${selectAtributos.nombreAtributo}</form:option>
        </c:forEach>
        </form:select>
        <form:errors path="rolHerramientaID" class="help-block" /></div>
</div>

<div class="control-group required">
        <label for="input01" class="control-label"><spring:message code="altaAplicacion.form.valor" /></label>
        <div class="controls">
        <input id="typeAhead_101" class="input-medium typeahead" type="text"  data-provide="typeahead" autocomplete="on">
 </div>

如何动态更改输入格式的容器？

Answer 1

我一直在寻找这个问题的解决方案并找到了你的帖子，其中有一些小改动对我有用。

我已经在表单中声明了固定输入字段SHOW CREATE TABLE table1; CREATE TABLE `table1` ( `id` int(10) unsigned NOT NULL, `val1` smallint(5) unsigned NOT NULL, `val2` mediumint(7) unsigned NOT NULL, `val3` smallint(5) unsigned NOT NULL, `val4` binary(1) NOT NULL DEFAULT '\0', `val5` float DEFAULT NULL, PRIMARY KEY (`id`,`val1`,`val2`,`val3`) ) ENGINE=TokuDB DEFAULT CHARSET=latin1 `COMPRESSION`=TOKUDB_LZMA，并在创建typeahead对象之前创建了一个函数来操作typeahead索引。在插入操作中，我在每个动态字段包装之前增加计数器并销毁typeahead对象并重新创建typeahead对象在创建字段后传递计数器。

对于版本（某些动态字段是直接在表单中创建的），我创建了一个REST服务来返回包装的字段数并从中开始计数。

它对我来说很完美。

如果您没有解决或需要帮助，请告诉我们！

Answer 2

以下代码对我有用 -

var typeaheadSettings = {
  source: function (query, result) {
      $.ajax({
              url: "{{url('/work-order/get_parts_suggestion')}}",
              data: 'txt=' + query,            
              dataType: "json",
              headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') },
              type: "POST",
              success: function (data) {
                result($.map(data, function (item) {
                    return item;
                }));
              }
      });
  }
};

$('.typeahead').typeahead(typeaheadSettings); /* init first input */

$('.typeahead').on('added',function(){
  $('.typeahead').typeahead(typeaheadSettings);
});

在追加/创建动态元素后添加此行 -

$('.typeahead').trigger('added');

参考 - https://www.bootply.com/61431

更改Typeahead的动态字段

2 个答案: