Question

我正在尝试为动态表单字段执行jquery自动完成和自动填充。在这里，我完成了动态表单字段的自动完成功能。但是自动填充仅适用于一个字段。这里的字段是“名称”和“价格”。字段“名称”是自动完成的，并且按键价格下载特别的产品是自动填充的。但是自动填充不适用于动态领域。如果有什么事情请建议我们。我们将不胜感激。谢谢。这是我的代码

{% load jsonify %}
<!doctype html>
  <script src="/static/js/jquery-1.10.2.js"></script>
  <script src="/static/js/jquery-ui.js"></script>
  <link rel="stylesheet" type="text/css" href="/static/css/jquery-ui.css">
<form method="post" action="/add/">{% csrf_token %}
    <label>Category</label>
    <div>
        <input type="text" name="category">
    </div>
    <input type="button" id="btn" value="+" />
    <div id="myTabContent" class="input_fields_wrap">
    </div>
    <input type="submit" value="Submit">
</form>
<script type="text/javascript">
var i = 0;
var wrapper = $(".input_fields_wrap");
//dynamic form and autocomplete
  $(function () {
    var availableTags = {{ material_list|jsonify }};
    console.log(availableTags)
    $("#btn").click(function () {
        if (i <= 100)
                i++;  
        $('#myTabContent').append(
            '<div>Name:<input name="name_'+i+'" type="text" id="field" class="searchInput" placeholder="Name" onkeydown="myMaterial()" />Price<input type="text" name="price_'+i+'" id="price" placeholder="Price"><input type="button" id="btn" value="-" class="remove_field" /></div>');
        $(".searchInput").autocomplete({
            source: availableTags
        });
    });
});

//autofill
function myMaterial(){
    var searchInput = document.getElementById("field").value;
    $.ajax({
        type: "GET",
        url: '/material/list/entry/',
        data : {
            name : searchInput,
        },        
        success: function (response) {
            price.value = response['price'];

        },        
    });
  }  
//Remove field
$(wrapper).on("click",".remove_field", function(e){ //user click on remove text
    e.preventDefault(); $(this).parent('div').remove(); i--;
})


</script>

Jquery Ajax动态字段自动完成和自动填充

0 个答案: