Question

我有一个页面要动态添加jquery-ui自动完成

我的.autocomplete（）代码包括一个$ .getJSON（'my_url'，my_payload），其中在my_payload中，'我试图发送 request.term （我在jqueryui中键入的内容）文本框）以及jquery ui文本框的ID。

问题是，对于所有动态添加的文本框，它们只是获取原始自动填充的字词和ID。

我设法通过将自动完成包装在将添加字段作为参数传递的函数中来包装，以获取获得的自动完成ID（不是原始）的方法，但是由于“ 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)

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

Answer 1

您可能想尝试使其更简单地进行测试。像这样：

  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);
        });
      }
    });
  }

提琴：https://jsfiddle.net/Twisty/pywb9nhv/23/

这使用.closest()从相对对象中收集详细信息。另外，我看不到在focus事件上初始化自动完成功能没有任何好处。

如果您需要进一步的帮助，请提供可以在工作示例中使用的示例数据。

希望能有所帮助。

当一页上有多个页面时，获取所选自动完成的条件

1 个答案: