Datalist javascript API

var datalist = new MvcDatalist(document.querySelector('.datalist'), {
    readonly: false, // Disables datalist if set to true.
    loadingDelay: 300, // The delay period in milliseconds for loading circles to appear.
    searchDelay: 500, // The debounce period in milliseconds for search inputs.
    autocomplete: {
        sort: 'Income', // Sort column to be used when querying autocomplete results.
        order: 'desc', // Sort order to be used when sorting autocomplete results.
        minLength: 1, // The minimum number of characters before a search is performed.
        rows: 20 // Number of results to show in autocomplete.
    },
    dialog: {
        preserveSearch: true, // Indicates if dialog search value should be preserved after close.
        openDelay: 100, // The time in milliseconds before dialog is opened (to allow data to load).
        rows : {
            min: 1, The minimum allowed value for rows.
            max: 99 The maximum allowed value for rows.
        }
    }
});

var element = document.querySelector('.datalist');

// Initializes new or returns an existing datalist's instance with applied options.
var datalist = new MvcDatalist(element[, options]);

datalist.browse(); // Opens datalist dialog for browsing data.

datalist.reload([triggerChanges = true]); // Reloads datalist values from the hidden id values.

datalist.selectFirst([triggerChanges = true]); // Automatically selects first element.

datalist.selectSingle([triggerChanges = true]); // Automatically selects single element only or nothing.

datalist.set(options); // Merges and applies newly specified options with the current ones.


var datalist = document.querySelector('.datalist');

// Triggered when selection happens
datalist.addEventListener('datalistselect', function(e) {
    e.detail.data - selected data array.
    e.detail.datalist - datalist's instance.
    e.detail.triggerChanges - a boolean specifying if input change events are triggered.

    // Preventing default stops datalist selection.
});

var filter = document.querySelector('#FilterId');

// Triggered on datalist additional filter change
filter.addEventListener('filterchange', function (e) {
    e.detail.datalist - datalist's instance.

    // Preventing default stops datalist filter check.
});