Question

我尝试使用JQuery动态添加文本框并对每个文本框进行实时搜索..它正在工作，但我想在表中添加文本框，每个表行包含五列。每列除第一列外包含一个文本框。第一列包含复选框。特别是文本框应该是不同的ID ....我试过下面的代码..但不能正常工作....

$(document).ready(function () {
            x=0;
            $('#btn-addrow').on('click', function () {
                $('#tbl-data').append('<tr><td><input type="checkbox"></td><td><div class="search-box"><input type="text" id='txt'+x+''><div class="res"></div></div></td><td><input type="text"></td><td><input type="text"></td></tr>');
               x++;
$('.search-box input[type="text"]').on("keyup input", function () {
                    /* Get input value on change */
                    var term = $(this).val();
                    var resultDropdown = $(this).siblings(".res");
                    if (term.length) {
                        $.get("../svr/aj-live-search.php", {query: term}).done(function (data) {
                            // Display the returned data in browser
                            resultDropdown.html(data);
                        });
                    } else {
                        resultDropdown.empty();
                    }
                });

                // Set search input value on click of result item
                $(document).on("click", ".res p", function () {
                    $(this).parents(".search-box").find('input[type="text"]').val($(this).text());
                    $(this).parent(".res").empty();
                });
            })
        })

Answer 1

首先，在附加部分有一些语法错误，比如何使用点击事件按钮中的keyup事件使用实时搜索，所以我简化了你的代码请尝试这个，希望它有效

$(document).ready(function () {
x=0;
$('#btn-addrow').on('click', function () {
    // alert('Do what ever');
    $('#tbl-data').append('<tr><td><input type="checkbox"></td><td><div class="search-box"><input type="text" id="txt'+x+'"><div class="res"></div></div></td><td><input type="text"></td><td><input type="text"></td></tr>');
    x++;

})
   // Set search input value on click of result item
   $('.search-box input[type="text"]').on("keyup input", function () {
    /* Get input value on change */
    var term = $(this).val();
    var resultDropdown = $(this).siblings(".res");
    if (term.length) {
        $.get("../svr/aj-live-search.php", {query: term}).done(function (data) {
                        // Display the returned data in browser
                        resultDropdown.html(data);
                    });
    } else {
        resultDropdown.empty();
    }
   });

   $(document).on("click", ".res p", function () {
    $(this).parents(".search-box").find('input[type="text"]').val($(this).text());
    $(this).parent(".res").empty();
   });

}）;

动态生成的文本框和实时搜索

1 个答案: