jquery 自动完成动态生成的文本框不起作用

标签 jquery ajax json

我无法在动态生成的文本框中进行自动完成，我已经搜索了互联网但找不到任何解决方案。我正在分享我迄今为止所做的事情:

JQUERY:

function bindAutoComplete(classname) {
    $("." + classname).autocomplete({
        source: function (request, response) {
            $.ajax({
                url: '/Admin/Ticket/GetPart',
                type: "GET",
                dataType: "json",
                data: { term: request.term },
                success: function (data) {
                    if (data != null) {
                        if (data.length > 0) {
                            response($.map(data, function (item) {
                                return { label: item.PartNumber, value: item.PartNumber };
                            }))
                        }
                        else {
                            response([{ label: 'No results found.' }]);
                        }
                    }
                }
            })
        },
    });

}

// fetch part number
$(document).ready(function () {
    $("#PartNumber23").autocomplete({
        source: function (request, response) {
            $.ajax({
                url: '/Admin/Ticket/GetPart',
                type: "GET",
                dataType: "json",
                data: { term: request.term },
                success: function (data) {
                    if (data != null) {
                        if (data.length > 0) {
                            response($.map(data, function (item) {
                                return { label: item.PartNumber, value: item.PartNumber };
                            }))
                        }
                        else {
                            response([{ label: 'No results found.' }]);
                        }
                    }
                }
            })
        },
    });

    $('#PartNumber23').keyup(function () {
        var errormsg = "";
        var amount = $('#PartNumber23').val();

        $.ajax({
            type: "GET",
            url: '/Admin/Ticket/GetPart',
            data: { 'term': amount },
            dataType: "json",
            success: function (data) {
                if (data != null) {
                    if (data.length > 0) {
                        $('#Manufacturer').val(data[1].Manufacturer);
                        $('#DateCode').val(data[0].DateCode);
                        $('#Package').val(data[0].PackageCase);
                        $('#buyingprice').val(data[0].Price);
                    }
                    else {
                        $('#Manufacturer').val('');
                        $('#DateCode').val('');
                        $('#Package').val('');
                        $('#buyingprice').val('');
                    }
                }

            },
            error: function (jqXHR, exception) {
                $('#error').html(jqXHR)
            }
        });
    });
})

var key = function () {
    var errormsg = "";
    var amount = $('#buyingprice').val();

    $.ajax({
        type: "POST",
        url: "/Admin/Ticket/ConvertCurrency",
        data: "{amount:" + amount + "}",
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: function (data) {
            $('#bpusd').val(data);
        },
        error: function (jqXHR, exception) {
            // $('#error').html("Primitive Functions not allowed.")
        }
    });
}

var key2 = function () {
    var errormsg = "";
    var amount = $('#customprice').val();

    $.ajax({
        type: "POST",
        url: "/Admin/Ticket/ConvertCurrency",
        data: "{amount:" + amount + "}",
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: function (data) {
            $('#amtusd').val(data);
        },
        error: function (jqXHR, exception) {
            // $('#error').html("Primitive Functions not allowed.")
        }
    });
}

$(document).ready(function () {
    $('#PartNumber23').keyup(key);
    $('#buyingprice').keyup(key);
    $('#customprice').keyup(key2);
    $('#Quantity').keyup(function () {
        var qty = $('#Quantity').val();
        $('#CustomQuantity').val(qty);
    })
})

$("#AddMore").click(function () {

    $("#maintable").each(function () {

        var tds = '<tr>';

        jQuery.each($('tr:last td', this), function () {
            tds += '<td>' + $(this).html() + '</td>';
        });
        tds += '</tr>';

        if ($('tbody', this).length > 0) {

            $('tbody', this).append(tds);
            $("#delete").fadeIn('200');
        }
        else {
            $(this).append(tds);
        }
    });

    bindAutoComplete('inputs')

});

HTML:

<table id="maintable">
                                    <thead>
                                        <tr>
                                            <th>
                                                Part No
                                            </th>
                                            <th>
                                                MFG
                                            </th>
                                            <th>
                                                DC
                                            </th>
                                            <th>
                                                PKG
                                            </th>
                                            <th>
                                                QTY. Need
                                            </th>
                                            <th>
                                                QTY. Offer
                                            </th>
                                            <th>
                                                BP
                                            </th>
                                            <th>
                                                BP(USD)
                                            </th>
                                            <th>
                                                AMT (USD)
                                            </th>
                                            <th>
                                                LT Days
                                            </th>
                                            <th>
                                                Desc
                                            </th>
                                            <th>
                                                Note
                                            </th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr>
                                            <td>
                                                <input class="inputs" type="text" name="abcd" id="PartNumber23" style="width:130px;" />
                                            </td>
                                            <td>
                                                <input class="text-box single-line" id="Manufacturer" name="Manufacturer" type="text" value="" />
                                                <span class="field-validation-valid" data-valmsg-for="Manufacturer" data-valmsg-replace="true"></span>
                                            </td>
                                            <td>
                                                <input class="text-box single-line" id="DateCode" name="DateCode" type="text" value="" />
                                                <span class="field-validation-valid" data-valmsg-for="DateCode" data-valmsg-replace="true"></span>
                                            </td>
                                            <td>
                                                <input class="text-box single-line" id="Package" name="Package" type="text" value="" />
                                                <span class="field-validation-valid" data-valmsg-for="Package" data-valmsg-replace="true"></span>
                                            </td>
                                            <td>
                                                <input class="text-box single-line" data-val="true" data-val-number="The field Quantity must be a number." data-val-required="The Quantity field is required." id="Quantity" name="Quantity" style="width:35px;" type="number" value="" />
                                                <span class="field-validation-valid" data-valmsg-for="Quantity" data-valmsg-replace="true"></span>
                                            </td>
                                            <td>
                                                <input class="text-box single-line" id="CustomQuantity" name="CustomQuantity" style="width:35px;" type="text" value="" />
                                                <span class="field-validation-valid" data-valmsg-for="CustomQuantity" data-valmsg-replace="true"></span>
                                            </td>
                                            <td>
                                                <input class="text-box single-line" id="buyingprice" name="BuyingPrice" type="text" value="" />
                                                <span class="field-validation-valid" data-valmsg-for="BuyingPrice" data-valmsg-replace="true"></span>
                                            </td>
                                            <td>
                                                <input id="bpusd" name="ConvertedBP" readonly="readonly" type="text" value="" />
                                                <span class="field-validation-valid" data-valmsg-for="ConvertedBP" data-valmsg-replace="true"></span>
                                            </td>
                                            <td>
                                                <input id="amtusd" name="ConvertedAmount" readonly="readonly" type="text" value="" />
                                                <span class="field-validation-valid" data-valmsg-for="ConvertedAmount" data-valmsg-replace="true"></span>
                                                <span id="error" class="error"></span>
                                            </td>
                                            <td>
                                                <input id="LTDays" name="LTDays" type="text" value="" />
                                                <span class="field-validation-valid" data-valmsg-for="LTDays" data-valmsg-replace="true"></span>
                                            </td>
                                            <td>
                                                <select class="drop" id="Description" name="Description"><option>Original ROHS</option>
<option>ROHS Compliance</option>
</select>
                                                <span class="field-validation-valid" data-valmsg-for="Description" data-valmsg-replace="true"></span>
                                            </td>
                                            <td>
                                                <textarea class="txtarea text-box multi-line" id="Note" name="Note" placeholder="Any Note With Ticket">
</textarea>
                                                <span class="field-validation-valid" data-valmsg-for="Note" data-valmsg-replace="true"></span>
                                            </td>
                                        </tr>
                                    </tbody>
                                </table>

我已将 id 替换为类，但自动完成功能仅适用于已存在的文本框，不适用于动态文本框

最佳答案

检查这个 Working Fiddle Demo 。

JS

bindAutoComplete('inputs');
$("#AddMore").click(function () {

    $("#maintable").each(function () {

        var tds = '<tr>';

        jQuery.each($('tr:last td', this), function () {
            tds += '<td>' + $(this).html() + '</td>';
        });
        tds += '</tr>';

        if ($('tbody', this).length > 0) {

            $('tbody', this).append(tds);
            bindAutoComplete('inputs');
            $("#delete").fadeIn('200');
        }
        else {
            $(this).append(tds);
            bindAutoComplete('inputs');
        }
    });
});

function bindAutoComplete(classname){
$("."+classname).autocomplete({
        source: function (request, response) {
            $.ajax({
                url: '/Admin/Ticket/GetPart',
                type: "GET",
                dataType: "json",
                data: { term: request.term },
                success: function (data) {
                    if (data != null) {
                        if (data.length > 0) {
                            response($.map(data, function (item) {
                                return { label: item.PartNumber, value: item.PartNumber };
                            }))
                        }
                        else {
                            response([{ label: 'No results found.' }]);
                        }
                    }
               }
          })
      },
 });

}

附加输入元素后调用bindAutoComplete('inputs')

<小时/>

HTML - 添加类名，例如:class="inputs"至<input>标签。

<input type="text" class="inputs" name="abcd" class="PartNumber23" style="width:130px;" />

关于jquery 自动完成动态生成的文本框不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/24012493/

上一篇：jquery - 隐藏模糊时的 Bootstrap 弹出窗口，除非弹出窗口内的元素具有焦点

下一篇：jquery - 为什么第二次打不开 Bootstrap 模式对话框？

相关文章：

Java - 从 HttpURLConnection 读取 POST 抛出响应代码 400

javascript - 如何为所有 AJAX 链接编写一个 jquery 函数

javascript - 一个标记名，多个属性 - 使用过滤器或使用多个选择器来更快地阻止查询？

ajax - JSF，使用ajax定期刷新组件？

javascript - Chart.js 条形图的奇怪问题，图像散射

从 json 字符串中删除反斜杠

jQuery AJAX header 授权

php - Symfony - 覆盖字段选项(required = false 到 required = true)

php - Laravel 4 + AJAX 不工作

javascript - 带有自定义滚动条的 jQuery 选择框 (roblaplaca) 不起作用

©2024 IT工具网  联系我们