AutoCompleteCellEditor.js

// Include the AutoComplete CSS and JS files



<style type="text/css">
<!-- Include the following AutoComplete CSS overrides -->
.yui-skin-sam .yui-ac {position:absolute;}
.yui-skin-sam .yui-ac-input {position:static;}
</style>



<script type="text/javascript">
// Include the following class definition
////////////////////////////////////////////////////////////////////////////////
//
// Begin class definition. Do not modify this code.
//
////////////////////////////////////////////////////////////////////////////////

/**
 * The AutoCompleteCellEditor class extends TextboxCellEditor such that
 * suggestions are displayed as user types in the input field.
 *
 * @namespace YAHOO.widget
 * @class AutoCompleteCellEditor
 * @extends YAHOO.widget.TextboxCellEditor
 * @constructor
 * @param oConfigs {Object} (Optional) Object literal of configs.
 */
YAHOO.widget.AutoCompleteCellEditor = function (oConfigs) {
    this._sId = "yui-acceditor" + YAHOO.widget.BaseCellEditor._nCount++;
    oConfigs = oConfigs || {};
    oConfigs.type = "autocomplete";
    YAHOO.widget.AutoCompleteCellEditor.superclass.constructor.call(this, oConfigs);
};

YAHOO.lang.extend(YAHOO.widget.AutoCompleteCellEditor, YAHOO.widget.TextboxCellEditor, {
    /**
     * Reference to the AutoComplete container element.
     *
     * @property container
     */
    container: null,

    /**
     * Reference to the AutoComplete instance.
     *
     * @property ac
     */
    ac: null,

    /**
     * Reference to optional AutoComplete configuration object.
     *
     * @property acConfig
     */
    acConfig: null,

    /**
     * Reference to the AutoComplete's DataSource instance.
     *
     * @property ds
     */
    ds: null,

    /**
     * Create the AutoComplete's container element.
     *
     * @method renderForm
     */
    renderForm: function () {
        YAHOO.widget.AutoCompleteCellEditor.superclass.renderForm.call(this);
        this.container = this.getContainerEl().appendChild(document.createElement("div"));
    },

    /**
     * Create the AutoComplete instance if needed.
     *
     * @method renderForm
     */
    show: function () {
        this.ac = this.ac || new YAHOO.widget.AutoComplete(this.textbox, this.container, this.ds, this.acConfig);
        YAHOO.widget.AutoCompleteCellEditor.superclass.show.call(this);
    }
});

YAHOO.lang.augmentObject(YAHOO.widget.AutoCompleteCellEditor, YAHOO.widget.TextboxCellEditor);

////////////////////////////////////////////////////////////////////////////////
//
// End class definition.
//
////////////////////////////////////////////////////////////////////////////////
</script>



<script type="text/javascript">
// Example implementation code
// Define Columns for the DataTable
var myColumnDefs = [
    {key:"address"},
    {key:"city", editor:
        new YAHOO.widget.AutoCompleteCellEditor(
            // You can optionally disable ok/cancel buttons
            {disableBtns:true,
            // You must pass in a DataSource to drive data to the AutoComplete
            ds: new YAHOO.util.LocalDataSource(["Los Angeles", "New York", "San Francisco"])})},
    {key:"state", editor:
        new YAHOO.widget.AutoCompleteCellEditor(
            // You can optionally set AutoComplete configurations
            {acConfig:{queryMatchCase:true},
            // You must pass in a DataSource to drive data to the AutoComplete
            ds: new YAHOO.util.LocalDataSource(["AL", "AK", "AZ"])})}
];

// DataSource for the DataTable
var myDataSource = new YAHOO.util.DataSource(YAHOO.example.Data.addresses);
myDataSource.responseType = YAHOO.util.DataSource.TYPE_JSARRAY;
myDataSource.responseSchema = {
    fields: ["address","city","state","amount","active","colors","fruit",{key:"last_login",parser:"date"}]
};

// Instantiate the DataTable
var myDataTable = new YAHOO.widget.DataTable("demo", myColumnDefs, myDataSource);
myDataTable.subscribe("cellClickEvent", myDataTable.onEventShowCellEditor);
</script>

A slight amendment to allow for modifying the autocomplete once it's instantiated. There's a few things you can't do
in the config, that you prob only want to do once (e.g. myAutoComp.generateRequest = function(){/.../); )
This lets you add an acApply config which is a function called in the scope of the AutoCompleteCellEditor,
so this.ac refers to the autocomplete instance. This function is only called once.

/**
* A function that is called on thye AutoComplete first time it's instantiated.
* Will be called in the context of the AutoCompleteCellEditor (ie. this == AutoCompleteCellEditor)
* @property acApply
*/
acAppy: function(){},

...

/**
* Create the AutoComplete instance if needed.
*
* @method renderForm
*/
show: function () {
    var ac;
    if (this.ac === null) {
      ac = new YAHOO.widget.AutoComplete(this.textbox, this.container, this.ds, this.acConfig);

      this.ac = ac;          
      this.acApply.call(this);

    }

    YAHOO.widget.AutoCompleteCellEditor.superclass.show.call(this);
}

Also, I think this is a better style declaration:
.yui-skin-sam .yui-dt-editor.yui-ac

As it restricts changes just to datatable editors, and won't affect other 'normal' ones on the page.

Matt