Fork me on GitHub

Example: Basic dsselect field creation

How to create a dsselect field.

Using a DataSource

How to populate the selectField using a YUI datasource (from local data, XHR, JSONP, function, ...):


<div id="field-container"></div>



YUI().use('inputex-dsselect', function(Y) {

    // Configure datasource
    var myDataSource = new Y.DataSource.IO({ source: "../assets/inputex-dsselect/books.json" });
    myDataSource.plug({fn: Y.Plugin.DataSourceJSONSchema, cfg: {
        schema: {
            resultListLocator: "Results",
            resultFields: ["id","quantity","amount","title", "category"]

    // Instantiate field
    field = new Y.inputEx.DSSelectField({
      name: 'book', 
      datasource: myDataSource, 
      valueKey: "id", 
      labelKey: "title", 
      parentEl: 'container1'

    Y.Node.create("<button>Get Value</button>").appendTo('#container1').on( 'click', function() {
        alert( field.getValue() );