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>

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