How to add jquery autocomplete UI functionality to each cell in my table

Question

I have a project requirement where I need to create a dynamic table using Jquery. I have reached a state where I am able to add dynamic columns or rows to a table. You can have a look at the fiddle code here : DEMO LINK HERE

HTML CODE here:

<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 Code here:

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;
}

Now, The problem is I need replace the Dropdown in each cell with a search input field. I searched around the net and found this link to be suitable. Autocomplete widget . I searched on how to implement this and found that if the DOM elements are created dynamically with the clone function then it will not work or Most of them have suggested to change the way in which my table is created. Can any one guide me to a tutorial or blog, which educates me on how to get this task done. My project is developed using Perl language.

My initial approach was, to clear the contents of my array arr , load it with the list of options on page load ( Ajax call ). re-use that list for all the drop downs in each cell. Is this the right approach?

I am a newbie to jquery. Please guide me. Thanks

Answer 1

Just run the .autocomplete() function after creating new elements: 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"]
});