Изменение динамического поля Typeahead

Question

Я программирую форму с динамическими полями typeaheads, и я обнаружил проблему, когда хочу показать и выбрать предложения. У меня есть два первых поля, выбор ввода и ввод типа. Когда опция выбрана, она загружает список значений во входном файле. Проблема возникает, когда я создаю (динамически) клон этой пары полей, и я хочу получить список значений в правильном typeahead. Я получаю идентификатор поля (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). Также у меня есть две кнопки «+» и «-». Когда я нажимаю «+», я клонирую эти два поля и увеличиваю число идентификаторов каждого элемента. Когда я нажимаю «-», я удаляю пару полей. (пример: selectAttr_101 -> 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> 

Как можно динамически менять контейнер типа head?

Answer 1

Я искал решение этой проблемы и нашел ваше сообщение с небольшими изменениями, которые сработали для меня.

Я указал фиксированное поле ввода в виде typeAheadId_1 и создал функцию перед созданием объекта 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