<div mvc-lookup-for="Id" url="People"></div>

const lookup = new MvcLookup(document.querySelector(".mvc-lookup"), {
    readonly: false, // Disables lookup 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.
        }
    }
});

// Any element inside the lookup structure, .mvc-lookup, #NamedId, etc.
const element = document.querySelector(".mvc-lookup");

// Initializes new or returns an existing lookup's instance with applied options.
const lookup = new MvcLookup(element[, { /* options */ }]);

// Updates current lookup options.
lookup.set({ /* options */ });

// Enables or disables readonly lookup.
lookup.setReadonly(false|true);

// Opens lookup dialog for browsing.
lookup.browse();

// Reloads lookup labels from current ids.
lookup.reload([triggerChanges = true]);

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

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