Skip to content

Instantly share code, notes, and snippets.

@jenny
Created May 19, 2010 23:11
Show Gist options
  • Save jenny/406977 to your computer and use it in GitHub Desktop.
Save jenny/406977 to your computer and use it in GitHub Desktop.
// 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>
@mattparker
Copy link

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment