javascript - 更改 Typeahead 的动态字段

Question

我正在编写一个带有动态预输入字段的表单，当我想要显示和选择建议时我发现了一个问题。我有两个第一个字段，一个输入选择和一个输入提前输入。当选择一个选项时，它会在输入预先输入中加载值列表。当我创建(动态)这对字段的克隆并且我想在正确的预先输入中获取值列表时，问题就出现了。当我聚焦于字段并在预输入中使用它时，我得到字段的 id (idTypeAhead)。这是代码:

//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)。我还有两个按钮“+”和“-”。当我单击“+”时，我克隆这两个字段并增加每个元素的 de id 编号。当我单击“-”时，我删除了一对字段。 (示例:selectAttr_101 -> 新克隆: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

我一直在寻找此问题的解决方案，并找到了您的帖子，其中进行了一些对我有用的小更改。

我已将表单中的固定输入字段指定为 typeAheadId_1，并在创建 typeahead 对象之前创建了一个函数来操作 typeahead 索引。在插入操作中，我增加计数器并在每个动态字段包装之前销毁预输入对象并重新创建预输入对象(通过计数器)字段创建后。

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

它对我来说非常有效。

如果您没有解决问题或需要帮助，请告诉我!