Back

Ajax select variants

Searches as you type (min. 1 char). The selected item stays in the list.
No selection yet.
Loads initial data even with empty search term when opened.
No selection yet.
Automatically fetches and selects the item with ID 3 on initialization.
Selected ID: 3
1000ms debounce and custom response mapping.
No selection yet.
These examples demonstrate different Ajax configurations for AvalynxSelect.

Source of "Basic Ajax Search" exampleCopy to clipboard


new AvalynxSelect('#ajax-select-basic', {
    ajax: {
        url: 'php/result2.get.php',
        method: 'GET',
        minimumInputLength: 1,
        mapRequest: (context) => {
            return {
                params: {
                    search: context.term,
                    perpage: context.length,
                    page: (context.start / context.length) + 1
                }
            };
        },
        mapResponse: (json) => {
            if (json && json.data) {
                return json.data.map(item => {
                    return {
                        value: item.data.id,
                        text: item.data.company + ' (' + item.data.price + ')'
                    };
                });
            }
            return [];
        }
    },
    onChange: (value) => {
        document.getElementById('result-basic').textContent = 'Selected ID: ' + value;
    }
});

Source of "Initial Load" exampleCopy to clipboard


new AvalynxSelect('#ajax-select-initial', {
    ajax: {
        url: 'php/result2.get.php',
        method: 'GET',
        minimumInputLength: 0,
        initialLoad: true,
        mapRequest: (context) => {
            return {
                params: {
                    search: context.term,
                    perpage: context.length,
                    page: (context.start / context.length) + 1
                }
            };
        },
        mapResponse: (json) => {
            if (json && json.data) {
                return json.data.map(item => {
                    return {
                        value: item.data.id,
                        text: item.data.company + ' (' + item.data.price + ')'
                    };
                });
            }
            return [];
        }
    },
    onChange: (value) => {
        document.getElementById('result-initial').textContent = 'Selected ID: ' + value;
    }
});

Source of "Default Value" exampleCopy to clipboard


new AvalynxSelect('#ajax-select-default', {
    ajax: {
        url: 'php/result2.get.php',
        method: 'GET',
        minimumInputLength: 1,
        mapRequest: (context) => {
            return {
                params: {
                    search: context.term,
                    perpage: context.length,
                    page: (context.start / context.length) + 1
                }
            };
        },
        mapResponse: (json) => {
            if (json && json.data) {
                return json.data.map(item => {
                    return {
                        value: item.data.id,
                        text: item.data.company + ' (' + item.data.price + ')'
                    };
                });
            }
            return [];
        }
    },
    onChange: (value) => {
        document.getElementById('result-default').textContent = 'Selected ID: ' + value;
    }
});

Source of "Custom Debounce & Mapping" exampleCopy to clipboard


new AvalynxSelect('#ajax-select-custom', {
    ajax: {
        url: 'php/result2.get.php',
        method: 'GET',
        debounce: 1000,
        minimumInputLength: 2,
        mapRequest: (context) => {
            return {
                params: {
                    search: context.term,
                    perpage: context.length,
                    page: (context.start / context.length) + 1
                }
            };
        },
        mapResponse: (json) => {
            if (json && json.data) {
                return json.data.map(item => {
                    return {
                        value: item.data.id,
                        text: 'COMPANY: ' + item.data.company.toUpperCase()
                    };
                });
            }
            return [];
        }
    },
    onChange: (value) => {
        document.getElementById('result-custom').textContent = 'Selected ID: ' + value;
    }
});
AvalynxSelect on GitHub Avalynx on GitHub