ArkSelect Control

                
    const multiSelectAjax = new ArkSelect(containerAJax, {
        placeholder: 'Search Indian Citites...',
        load_data: async (qry) => {
            var dd = await fetch(`https://ark-cities.immanuel.co/api/IN/cities/${qry}`);
            var rr = await dd.json();
            if (rr.error) {
                console.warn(`errored in fetching citites ajax`);
                return [];
            }
            console.log('loaded ajax data', rr);
            return rr.data.map(t => { 
                return { text: t.name, value: t.geonameid }
            });
        },
        maxSuggestions: 5,
        allowCustomValues: true
    });

    document.getElementById('getAjaxValuesBtn').addEventListener('click', () => {
        const selectedValues = multiSelectAjax.getSelectedValues();
        const selectedItems = multiSelectAjax.getSelectedItems();

        document.getElementById('selectedAjaxValues').innerHTML = `
                Selected Values: ${selectedValues.join(', ')}

                Selected Items: ${selectedItems.map(item => item.text).join(', ')}
            `;
    });
                
            

        const sampleData = [
            { value: '1', text: 'JavaScript' },
            { value: '2', text: 'Python' },
            { value: '3', text: 'Java' },
            { value: '4', text: 'C++' },
            { value: '5', text: 'Ruby' },
            { value: '6', text: 'Go' },
            { value: '7', text: 'Swift' },
            { value: '8', text: 'TypeScript' },
            { value: '9', text: 'PHP' },
            { value: '10', text: 'Rust' }
        ];

        // Initialize the multi-select control
        document.addEventListener('DOMContentLoaded', () => {
            const container = document.getElementById('multiSelect1');
            const multiSelect = new ArkSelect(container, {
                placeholder: 'Search programming languages...',
                data: sampleData,
                maxSuggestions: 5,
                allowCustomValues: true
            });

            // Display selected values when button is clicked
            document.getElementById('getValuesBtn').addEventListener('click', () => {
                const selectedValues = multiSelect.getSelectedValues();
                const selectedItems = multiSelect.getSelectedItems();

                document.getElementById('selectedValues').innerHTML = `
                        Selected Values: ${selectedValues.join(', ')}

                        Selected Items: ${selectedItems.map(item => item.text).join(', ')}
                    `;
            });
            document.getElementById('updateDatasBtn').addEventListener('click', () => {
                multiSelect.setData([
                    { value: '1', text: 'New Data 1' },
                    { value: '2', text: 'New Data 2' },
                    { value: '3', text: 'New Data 3' },
                    { value: '4', text: 'New Data 4' },
                    { value: '5', text: 'New Data 5' },
                    { value: '6', text: 'New Data 6' },
                    { value: '7', text: 'New Data 7' }
                ]);
            });

            // Test cases
            document.getElementById('runTestsBtn').addEventListener('click', () => {
                runTests(multiSelect);
            });
        });