_activeComponentId = 'comboBox';

ComboBox

A searchable, selectable dropdown. Typing filters the list via a real server request and items can be selected individually or, with Multi Selection enabled, in combination, shown either as checked rows or as removable tags.

Try it

Typing here triggers a real server request. The checkbox column only appears once Multi Selection is enabled.

Component demos show every property used in the settings panel, even at default values, so you can see exactly what's being configured. Bindary's data binding updates the component live when a setting changes; that mechanism isn't covered here, see Bindary for how it works.

Busy retrieving data...

No items found for the specified search filter.

NAME
GENDER
BIRTHDATE
COMPANY

{checkBox}
Select All

{checkBox}
{text}
{gender}
{birthDate}
{companyName}

Usage

The HTML and JavaScript tabs build the identical ComboBox setup shown above, declaratively via attributes or imperatively via the JS API. The .NET Backend tab shows the server-side data source both approaches talk to.

<div id="expandButton" ui-type="Button" ui-action="clone" ui-transparent-border="false" ui-primary="false"></div>
<div id="pager" ui-type="DataPager" ui-action="clone" ui-page-size="10" ui-visible-pages="2"></div>
<div id="comboBox"
     ui-type="ComboBox"
     ui-observing="true"
     ui-placeholder="Find by name"
     ui-allow-input="true"
     ui-multi-select="false"
     ui-multi-select-tagging="false"
     ui-auto-grow="false"
     ui-load-on-demand="true"
     ui-enable-data-pager="true"
     ui-data-pager-id="pager"
     ui-expand-button-id="expandButton"
     ui-ajax='{"load":{"url":"DataServer"}}'
     ui-events='{ "onPreLoadItemList": "$bindary.controller.comboBox.preLoadItemList" }'>
    <div ui-template="Preloader" ui-cloneable="false">Busy retrieving data...</div>
    <div ui-template="NoResult" ui-cloneable="false">No items found for the specified search filter.</div>
    <div ui-template="Header" ui-cloneable="false">
        <ul>
            <li class="checkBox"></li>
            <li>NAME</li>
            <li>GENDER</li>
            <li>BIRTHDATE</li>
            <li>COMPANY</li>
        </ul>
    </div>
    <div ui-template="SelectAll" ui-cloneable="true">
        <ul>
            <li class="checkBox">{checkBox}</li>
            <li>Select All</li>
        </ul>
    </div>
    <div ui-template="Default" ui-cloneable="true">
        <ul>
            <li class="checkBox">{checkBox}</li>
            <li>{text}</li>
            <li>{gender}</li>
            <li>{birthDate}</li>
            <li>{companyName}</li>
        </ul>
    </div>
</div>

The functions referenced above by name live on this demo's Bindary controller:

$bindary.controller.comboBox =
{
    preLoadItemList: (comboBox, args) =>
    {
        comboBox.ajax.load.customParameters = window.JSON.stringify(
            window.createDataServerMsg('Components.ComboBoxController.LoadComboBoxData')
        );
    }
};

// Expand button and pager, exist only to be cloned into the ComboBox via
// expandButtonId/dataPagerId, they are never rendered on their own (see
// ui-action="clone" in the HTML tab for the declarative equivalent).
const expandButton = $UI.createComponent(componyx.UI.Button, {
    id: 'expandButton',
    transparentBorder: false,
    primary: false
});

const pager = $UI.createComponent(componyx.UI.DataPager, {
    id: 'pager',
    pageSize: 10,
    visiblePages: 2
});

const comboBox = $UI.createComponent(componyx.UI.ComboBox, {
    id: 'comboBox',
    observing: true,
    placeholder: 'Find by name',
    allowInput: true,
    multiSelect: false,
    multiSelectTagging: false,
    autoGrow: false,
    loadOnDemand: true,
    enableDataPager: true,
    dataPagerId: pager.id,
    expandButtonId: expandButton.id,
    containerElement: document.body
});

comboBox.ajax.load.url = 'DataServer';
comboBox.events.onPreLoadItemList.add(function ()
{
    comboBox.ajax.load.customParameters = window.JSON.stringify(
        window.createDataServerMsg('Components.ComboBoxController.LoadComboBoxData')
    );
});

comboBox.setPreloaderTemplate('Busy retrieving data...');
comboBox.setNoResultTemplate('No items found for the specified search filter.');
comboBox.setHeaderTemplate(`
    <ul>
        <li class="checkBox"></li>
        <li>NAME</li>
        <li>GENDER</li>
        <li>BIRTHDATE</li>
        <li>COMPANY</li>
    </ul>
`);
comboBox.setSelectAllTemplate(`
    <ul>
        <li class="checkBox">{checkBox}</li>
        <li>Select All</li>
    </ul>
`);
comboBox.addTemplate('Default', `
    <ul>
        <li class="checkBox">{checkBox}</li>
        <li>{text}</li>
        <li>{gender}</li>
        <li>{birthDate}</li>
        <li>{companyName}</li>
    </ul>
`, true);

comboBox.show();

private const int PageSize = 10;

public static async Task LoadComboBoxData(Client client, DataRequest request)
{
    ComboBoxRequest comboRequest = JsonConvert.DeserializeObject<ComboBoxRequest>(request.Message);

    ItemList<ComboBoxItem> itemList = new ItemList<ComboBoxItem>();
    ComboBoxAjaxResult result = new ComboBoxAjaxResult(itemList);

    IEnumerable<Person> filtered = Global.DemoData.Persons;

    if (!string.IsNullOrEmpty(comboRequest.Text))
        filtered = filtered.Where(p => p.Name.IndexOf(comboRequest.Text, StringComparison.OrdinalIgnoreCase) > -1);

    int pageIndex = comboRequest.PageIndex ?? 1;

    foreach (var person in filtered.Skip((pageIndex - 1) * PageSize).Take(PageSize))
        itemList.Add(CreateItem(person));

    result.FilteredColumns.Add("text", new FilteredColumn(FilteredColumn.FilterOption.CONTAINS));
    result.TotalItemCount = filtered.Count();

    await Server.Send(client, result.Serialize(), request.XhrRequestId);
}

private static ComboBoxItem CreateItem(Person person)
{
    ComboBoxItem item = new ComboBoxItem();
    Dictionary<string, object> attributes = new Dictionary<string, object>();

    item.Id = person.Id.ToString();
    item.Value = item.Id;
    item.Text = person.Name;

    attributes.Add("gender", person.Gender.ToString());
    attributes.Add("birthDate", person.BirthDate.ToString("MM/dd/yyyy"));
    attributes.Add("companyName", person.Company.Name);
    item.Attributes = new Attributes(attributes);

    return item;
}

What's next

See the ComboBox API reference for the complete list of properties, events and methods. See the ComboBox Autocomplete demo for a lightweight typeahead variant without the expand button, columns or paging shown above.