0

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?

Edited by dwlamb: clarity

2
Contributors
1
Reply
14
Views
4 Months
Discussion Span
Last Post by RobinR
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.