Is it possible to attach a jquery autocomplete input to a form initiated by ajax editing a table?
I have the following method for making a table cell editable using AJAX. I.e., user clicks on the cell and it transforms to a mini form. Hit Enter and the changes are sent to a script, updating a database and the new content is sent back to the table.
This code I am certain is error free and working. I want to expand functionality so the input for the new value comes into the DOM using jQuery ui autocomplete.
$(function (){
$('tbody').on('click','td:not(.exclude)',function() {
displayForm( $(this) );
});
});
function displayForm( cell ){
//start new, what I am attempting to expand
var availableTags = [
"ActionScript",
"AppleScript",
"Asp",
"BASIC",
"C",
"C++",
"Clojure",
"COBOL",
"ColdFusion",
"Erlang",
"Fortran",
"Groovy",
"Haskell",
"Java",
"JavaScript",
"Lisp",
"Perl",
"PHP",
"Python",
"Ruby",
"Scala",
"Scheme"
];
$("#temp_ajax_form_input").autocomplete({
source: availableTags
});
//end new, what I am attempting to expand
var column = cell.attr('class'),
column = (column.indexOf(" ") > 0) ? column.substr(0, column.indexOf(' ')) : column,
table = cell.closest('table').attr('class'),
id = cell.closest('tr').attr('data-id'),
striping = cell.closest('div').attr('class'),
cellWidth = parseInt(cell.css('width'),10),
cellWidth = parseInt(cellWidth * .96).toString()+'px',
rank = cell.attr('data-rank'),
prevContent = cell.text(),
method = cell.attr('data-method'),
form =
//formatted here for legibility. Otherwise, it is all one contiguous string
'<form action="javascript: this.preventDefault">
<input id="temp_ajax_form_input" style="text-align:center" type="text" name="newValue" size="4" value="' + prevContent + '">
<input type="hidden" name="id" value="' + id + '">
<input type="hidden" name="rank" value="' + rank + '">
<input type="hidden" name="field" value="' + column + '">
<input type="hidden" name="method" value="' + method + '">
<input type="hidden" name="table" value="' + table + '">
</form>';
cell.html(form)
.find('input[type=text]')
.focus()
.css('width', cellWidth)
.select();
cell.on('click',function() {return false;});
cell.on('keydown', function(e) {
if (e.keyCode == 13) {
changeField(cell, prevContent, id, striping,table);
} else if (e.keyCode == 27) {
cell.text(prevContent);
cell.off('click');
}
});
}From research, autocomplete is dependent on an input tag having a certain id. Based on my existing code example I need to make the input#temp_ajax_form_input (line 53) the attachment point for jquery ui.
I have included the most basic form of the jquery autocomplete syntax above simply to see if I can make an autocomplete list work on an editable cell from a static list above. Accomplishing that, I'll have a start point for how to write the rest of the autocomplete syntax.
From examining the code for the various examples at http://jqueryui.com/autocomplete/ jquery modifies the tag from <input id="tags"> to <input id="tags" class="ui-autocomplete-input" autocomplete="off">. That change is not happening with my example.
How can I implement an autocomplete for a table with editable table cells?