如何将 jquery 自动完成 UI 功能添加到表中的每个单元格

Question

我有一个项目要求，我需要使用 Jquery 创建一个动态表。 我已经达到了可以向表中添加动态列或行的状态。 您可以在这里查看小提琴代码：DEMO LINK HERE

此处为 HTML 代码：

<br /><br />
<div id='input_div' name='input_div'>
Please Input your Matrix Dimensions : <input type="text" id="rowcount" size="2" value="1"> 
<span>X <input type="text" id="columncount" size ="2" value="1">
</div> <br><br>
<input type="button" id="tablebtn" value="Create Table">
<input type="button" id="newabilitybtn" value="Add Ability">
<input type="button" id="newlevelbtn" value="Add Level">
<input type="button" id="submit" value="Submit">
<br><br>
<div id="box">
</div>  

这里是jQuery代码：

var arr = [
  {val : 1, text: 'One'},
  {val : 2, text: 'Two'},
  {val : 3, text: 'Three'},
  {val : 4, text: 'Four'}
];
$("#newabilitybtn").hide();
$("#newlevelbtn").hide();
$("#submit").hide();

$("#tablebtn").click(function(){     
    mytable = $('<table></table>').attr({ id: "MatrixTable" });
    var rows = new Number($("#rowcount").val());
    var cols = new Number($("#columncount").val());
    var tr = [];

    for (var i = 0; i < rows; i++) {
        var row;
        if( i == 0){
            row=$('<tr><th></th><th>Level</th></tr>').attr({ class: ["Lheader"] }).appendTo(mytable);
        }
        row = $('<tr><th>Ability</th>').attr({ class: ["Aheader"] }).appendTo(mytable);

        for (var j = 0; j < cols; j++) {
            var td;
            td = $('<td>').attr({ class: ["matrix_row"] }).appendTo(row);
            var sel = $('<select />').attr({ class: ["matrix"], text:'Elway',id: "MatrixTable"+"_"+i+"_"+j  }).appendTo(td);
            $(arr).each(function() {
                sel.append($("<option>").attr('value',this.val).text(this.text));
            });  
            $('<br><br><span>').attr({'class':'rubric_span' }).html('Selected: ').appendTo(td);
            // $('#rubric_name').html(span);
            $('</span>').appendTo(row);
            $('</td>').appendTo(row);
        }   
        $('</tr>').appendTo(row);
    }
    //console.log("TTTTT:"+mytable.html());
    mytable.appendTo("#box");   
    $("#tablebtn").hide(); $("#input_div").hide();
    $("#newabilitybtn").show();
    $("#newlevelbtn").show();
    $("#submit").show();
});

$("#newabilitybtn").click(function(){
    $('#MatrixTable').append($('#MatrixTable').find("tr:last").clone());
});


$("#newlevelbtn").click(function(){
    $('#MatrixTable tr').each(function(){
        $(this).append($(this).find(">*:last").clone());
    });
});

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

    jsonObj = [];
    var dropdown_count = 0;
    var rowCount = $('#MatrixTable tr').length;
    var ColCount = $('#MatrixTable').find("tr:last td").length;
    var row = 1;
    var col = 1;

    // Fetching the Level and Ability Names
    //$("select[class=LHeader]").each(function() {

    //    var id = "Level_"+ row + "_" + col++  ;
    //    var selected_val = 0 ;//$(this).text();
    //    item = {}
    //    item ["id"] = id;
    //    item ["names"] = selected_val;
    //    jsonObj.push(item);
    //}); 

    //row = 1;
    //col = 1;    

    // Fetching the rubric Selections
    $("span[class=rubric_span]").each(function() {

        var id = "selected_rubric_"+ row + "_" + col++  ;
        //var selected_val = $(this).val();
        var selected_val = $(this).text();
        item = {}
        item ["id"] = id;
        item ["selected_rubric"] = selected_val;
        if( row == rowCount ){
            row = 1;
        }   
        if( col == ColCount + 1 ){
            col = 1;
            row++;
        }
        jsonObj.push(item);
    });
    console.log(jsonObj);    
});

CSS 代码：

table{
    width:200px;
    height:200px;
}
table td{
    padding:10px;
    margin:10px;
    border:1px solid #ccc;
}
table tr{
    height:10px;
}

现在，问题是我需要用搜索输入字段替换每个单元格中的下拉菜单。我在网上搜索，发现这个链接是合适的。 Autocomplete widget。我搜索了如何实现这一点，发现如果 DOM 元素是使用 clone 函数动态创建的，那么它将不起作用，或者他们中的大多数人都建议改变我的表的创建方式。任何人都可以指导我到教程或博客，它可以教育我如何完成这项任务。我的项目是使用 Perl 语言开发的。

我最初的方法是，清除我的数组arr 的内容，在页面加载时使用选项列表加载它（Ajax 调用）。为每个单元格中的所有下拉列表重新使用该列表。这是正确的方法吗？

我是 jquery 的新手。请指导我。谢谢

Answer 1

创建新元素后只需运行.autocomplete() 函数：https://jsfiddle.net/hmfpkdxh/5/

$('#MatrixTable tr').each(function () {
    $(this).append($(this).find(">*:last").clone());
    $(this).find(">*:last input").val("").autocomplete({
        source: ["c++", "java", "php", "coldfusion", "javascript", "asp", "ruby"]
    });
});

$('#MatrixTable').append($('#MatrixTable').find("tr:last").clone());
$('#MatrixTable tr:last td input').val("").autocomplete({
    source: ["c++", "java", "php", "coldfusion", "javascript", "asp", "ruby"]
});