IO Select Examples

Basic Usage

$('#basicSelect').ioSelect();

Selected Value:

null

Multiple Selection

$('#multiSelect').ioSelect({
    placeholder: 'Select colors',
    searchPlaceholder: 'Search colors...'
});

Selected Values:

[]

Customized

$('#customSelect').ioSelect({
    placeholder: 'Select country',
    searchPlaceholder: 'Search country...',
    noResultsText: 'No country found'
});

Selected Value:

null

Search Disabled

$('#noSearchSelect').ioSelect({
    searchable: false,
    placeholder: 'Select month'
});

Selected Value:

null

Dynamic Search with AJAX

The select below fetches products from the backend via AJAX as you type in the search box (example API: dummyjson.com/products/search).

$('#ajaxSelect').ioSelect({
    placeholder: 'Select a product',
    searchPlaceholder: 'Search products...',
    noResultsText: 'No products found',
    ajax: {
        url: 'https://dummyjson.com/products/search',
        method: 'GET',
        dataKey: 'products',
        queryParam: 'q'
    }
});

Selected Product:

null

Multiple Selection with AJAX

In this example, you can select multiple products. Products are fetched via AJAX as you type.

$('#ajaxMultiSelect').ioSelect({
    placeholder: 'Select product(s)',
    searchPlaceholder: 'Search products...',
    noResultsText: 'No products found',
    ajax: {
        url: 'https://dummyjson.com/products/search',
        method: 'GET',
        dataKey: 'products',
        queryParam: 'q'
    }
});

Selected Products:

[]

Initial Selected Feature

In this example, initially selected values are set via JavaScript.

Single Select

$('#initialSingleSelect').ioSelect({
    initialSelected: {
        id: '2',
        name: 'London'
    }
});

Selected Value:

null

Multiple Select

$('#initialMultiSelect').ioSelect({
    initialSelected: [
        { id: 'red', name: 'Red' },
        { id: 'blue', name: 'Blue' }
    ]
});

Selected Values:

[]

Initial Selected with AJAX

In this example, an initial value is set for an AJAX-powered select. The product with ID 1 "iPhone 9" is selected by default.

$('#ajaxInitialSelect').ioSelect({
    placeholder: 'Select a product',
    searchPlaceholder: 'Search products...',
    noResultsText: 'No products found',
    ajax: {
        url: 'https://dummyjson.com/products/search',
        method: 'GET',
        dataKey: 'products',
        queryParam: 'q'
    },
    initialSelected: {
        id: '1',
        name: 'iPhone 9'
    }
});

Selected Product:

null

Multiple Initial Selected with AJAX

In this example, multiple products are initially selected in an AJAX-powered select. iPhone 9 and Samsung Galaxy are selected by default.

$('#ajaxMultiInitialSelect').ioSelect({
    placeholder: 'Select product(s)',
    searchPlaceholder: 'Search products...',
    noResultsText: 'No products found',
    ajax: {
        url: 'https://dummyjson.com/products/search',
        method: 'GET',
        dataKey: 'products',
        queryParam: 'q'
    },
    initialSelected: [
        { id: '1', name: 'iPhone 9' },
        { id: '2', name: 'Samsung Galaxy' }
    ]
});

Selected Products:

[]