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

我有一个项目要求，我需要使用 Jquery 创建一个动态表。我已经达到了能够向表添加动态列或行的状态。你可以在这里看看小提琴代码：演示链接在这里

这里的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 CODE：

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

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

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

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