Combo box built as React.js component

Combobox component

It is same as dropdown list, but user can input value.

Usage

var data = [{label: "First item"}, {label: "Second item"}];
var combobox = React.renderComponent(
    Combobox({data: data, defaultValue: "First"}),
    document.getElementById('here')
);

Examples

Component properties

• data {object[]} Required - Array of objects In objects must be defined "label" property, value of that property will be showed in dropdown list
• defaultValue="" {string} - that value will be showed after initialization
• disabled=false {boolean} - combobox may be disabled
• onChange {function} - this function called on every change
  arguments:
  • currentValue - of text field
  • prevValue - of text field

by default is empty function

• filterFunc {function} - that function called for filter items from data property by textValue from user, after filter items showed as options in dropdown
  arguments:
  • textValue - value from combobox text field
  • item - from data property
  • return true/false for show or hide item
    by default function is:

function(textValue, item){
        var s = textValue.toLowerCase().replace(' ', '');
        return item.label.toLowerCase().replace(' ', '').indexOf(s) >= 0;
}    

Component methods

• open() / close() - Open or close dropdown list
• isClosed() - Check that dropdown is closed
• enable() / disable() - Enable or disable component
• isDisabled() - Check component is disabled
• setTextValue(string) - Set component value
• setData(object[]) - Set component data, for dropdown list
• value() - Get component value (object from data if user select option in dropdown list, or string if user entered text)

ComboboxRemote component

It is subclass of Combobox, it can get data for dropdown list from remote source.

Properties

All properties from Combobox (but filterFunc=false) and:

• url {string} - default url, which return data. Data must be same structure as in Combobox data property.
• urlBuilder {function} - calls on every change, generate url for next request
  arguments:
  • url - same as url property
  • textValue - value from combobox text field
  • return {string} with new url
    by default function is:

function(url, textValue) {
    return url.replace('{}', textValue);
}

• onSuccess {function} - calls on every successful response
  arguments:
  • data - from response
    by default function is:

function(data) {
    this.refs.combobox.setData(data);
}

• onError {function} - calls on every error response
  arguments:
  • xhr - XMLHTTPRequest jQuery superset
  • status - response status
  • error - errorThrown
    by default function is:

function(xhr, status, err) {
    console.error(this.props.url, status, err.toString());
}

Component methods

All methods from Combobox

Browser support

Tested in IE9+, Chrome33+, Firefox29+, Safari7+ Not tested in mobile browsers

TODO

see TODO.md

Credits

Author: Aleksey Ostapenko