YUI: Datatable with AutoComplete Filter
Jump to the code
The CSS
The HTML
The Javascript
(function() { var getResults = function(query) { myDataSource.sendRequest('datatable=yes&query=' + query, myDataTable.onDataReturnInitializeTable, myDataTable); }; var oACDS = new YAHOO.widget.DS_JSFunction(getResults); oACDS.queryMatchContains = true; var oAutoComp = new YAHOO.widget.AutoComplete("dt_input","dt_ac_container", oACDS); var myColumnHeaders = [ {key:"searchterms", text: "Terms", sortable: true}, {key:"count", text: 'Count', sortable: true } ]; var myColumnSet = new YAHOO.widget.ColumnSet(myColumnHeaders); var myDataSource = new YAHOO.util.DataSource("data.php?"); myDataSource.responseType = YAHOO.util.DataSource.TYPE_JSON; myDataSource.responseSchema = { resultsList: "ResultSet.Results", fields: ["searchterms","count"] }; var oConfigs = { initialRequest: "datatable=yes&query=a" }; var myDataTable = new YAHOO.widget.DataTable("datatable", myColumnSet, myDataSource,oConfigs); })();