Получить термин для выбранного автозаполнения, когда несколько находятся на одной странице - PullRequest
Новая
       55

Получить термин для выбранного автозаполнения, когда несколько находятся на одной странице

0 голосов
/ 30 мая 2019

У меня есть страница, на которой я динамически добавляю автозаполнения jquery-ui

Мой код .autocomplete () включает в себя $ .getJSON ('my_url', my_payload), где в my_payload 'я пытаюсь отправить request.term (что я ввел в текстовое поле jqueryui ), а также идентификатор текстового поля jquery ui.

Проблема в том, что для всех динамически добавляемых текстовых полей они просто выбирали термин и идентификатор исходного автозаполнения.

Мне удалось найти способ получения идентификатора добавленного (не оригинального) автозаполнения, обернув автозаполнение в функцию, в которой добавленное поле было передано в качестве параметра, но поскольку в запросе указан термин «term», который приходит из .autocomplete, я не знаю, как получить это для новых.

https://jsfiddle.net/amchugh89/1L8jvea5/4/

//=======dynamic formset script from https://medium.com/all-about- 
django/adding-forms-dynamically-to-a-django-formset-375f1090c2b0======
function updateElementIndex(el, prefix, ndx) {
var id_regex = new RegExp('(' + prefix + '-\\d+)');
var replacement = prefix + '-' + ndx;
if ($(el).attr("for")) $(el).attr("for", $(el).attr("for").replace(id_regex, replacement));
if (el.id) el.id = el.id.replace(id_regex, replacement);
if (el.name) el.name = el.name.replace(id_regex, replacement);
}
function cloneMore(selector, prefix) {
var newElement = $(selector).clone(true);
var total = $('#id_' + prefix + '-TOTAL_FORMS').val();

newElement.find(':input:not([type=button]):not([type=submit]):not([type=reset])').each(function() {

if ($(this).attr('name')){

    var name = $(this).attr('name').replace('-' + (total-1) + '-', '-' + total + '-');
    var id = 'id_' + name;
    $(this).attr({'name': name, 'id': id}).val('').removeAttr('checked');

if($(this).attr('id').includes('gl')){

console.log($(this).attr('id'))
make_autocomplete($(this))

}


}
});
newElement.find('label').each(function() {
    var forValue = $(this).attr('for');
    if (forValue) {
      forValue = forValue.replace('-' + (total-1) + '-', '-' + total + '-');
      $(this).attr({'for': forValue});
    }
});
total++;
$('#id_' + prefix + '-TOTAL_FORMS').val(total);
$(selector).after(newElement);
var conditionRow = $('.form-row:not(:last)');
conditionRow.find('.btn.add-form-row')
.removeClass('btn-success').addClass('btn-danger')
.removeClass('add-form-row').addClass('remove-form-row')
.html('<span class="glyphicon glyphicon-minus" aria-hidden="true"></span>');
return false;
}
function deleteForm(prefix, btn) {
var total = parseInt($('#id_' + prefix + '-TOTAL_FORMS').val());
if (total > 1){
    btn.closest('.form-row').remove();
    var forms = $('.form-row');
    $('#id_' + prefix + '-TOTAL_FORMS').val(forms.length);
    for (var i=0, formCount=forms.length; i<formCount; i++) {
        $(forms.get(i)).find(':input').each(function() {
            updateElementIndex(this, prefix, i);
        });
    }
}
return false;
}
$(document).on('click', '.add-form-row', function(e){
e.preventDefault();
cloneMore('.form-row:last', 'form');



return false;
});
$(document).on('click', '.remove-form-row', function(e){
e.preventDefault();
deleteForm('form', $(this));
return false;
});
//====================



//AUTOCOMPLETE==(that allows for multiple ACs 
https://stackoverflow.com/questions/24656589/using-jquery-ui-autocomplete- 
with-multiple-input-fields)===================================

function make_autocomplete(ee) {

ee.on("focus", function(){    //.autocomplete({
  $(this).autocomplete({
  minLength: 2,
  source: function( request, response ) {
    var term = request.term;





   //with the formset, I want to get the row for which I am typing in the 
   'term'
    var this_formset_row_autocomplete_id 
    =ee.attr('id');//$(this.element).prop("id");//

$(this).attr('id');
    console.log(this_formset_row_autocomplete_id);


var corresponding_branch_html_id = 
this_formset_row_autocomplete_id.replace('gl_account','branch');
var this_formset_row_branch_sym_id = 
$('#'+corresponding_branch_html_id).val();
//console.log(corresponding_branch_html_id, this_formset_row_branch_sym_id)

var appended_data={term:term, 
this_formset_row_branch_sym_id:this_formset_row_branch_sym_id};

    console.log(appended_data);


    $.getJSON( "{% url 'dashapp:account_autocomplete' %}", appended_data, 
function( data,
status, xhr ) {
      //cache[ term ] = data;

      response( data );
    });
  }
});
 });

}//end function make_autocomplete

var ee =$( ".account_autocomplete" )
make_autocomplete(ee)

//===============

1 Ответ

0 голосов
/ 11 июня 2019

Возможно, вы захотите сделать его более простым для тестирования.Что-то вроде: 

  function make_autocomplete(obj) {
    obj.autocomplete({
      minLength: 2,
      source: function(req, resp) {
        var myData = {
          term: req.term,
          original_form_branch_id: $(this).closest("form").attr("id"),
          this_formset_row_branch_sym_id: $(this).closest(".row").find("select").val()
        }
        $.getJSON("myurl", myData, function(results) {
          resp(results);
        });
      }
    });
  }

Fiddle: https://jsfiddle.net/Twisty/pywb9nhv/23/

Используется .closest() для сбора деталей из соответствующих объектов.Также я не вижу никакой выгоды для инициализации автозаполнения на событии focus.

Если вам нужна дополнительная помощь, предоставьте пример данных, которые можно использовать в рабочем примере.

Надеюсь, что это немного поможет.

...