Dropdown Desk is a light-weight jQuery plugin that transforms customary enter fields into autocomplete dropdowns displaying knowledge in an HTML desk.
While you sort one thing within the enter discipline, the plugin presents matched data in a desk format, ideally suited for displaying structured knowledge like invoices, merchandise, or buyer data.
Options:
- Improved Information Visibility: Displaying knowledge in a desk makes it simpler to learn and perceive in comparison with an ordinary dropdown listing.
- Information Supply Choices: Works with predefined datasets or dynamic AJAX-based knowledge loading.
- Enhanced Search and Filtering: Customers can shortly discover particular gadgets by typing key phrases, and the tabular view aids in refining their search.
- Higher Person Expertise: Keyboard navigation and multiselect performance enhance effectivity and adaptability.
- Customizable Templates: Helps row templates for superior formatting, which allows exact management over the looks of every entry.
- Efficiency: Lazy rendering ensures easy efficiency even with massive datasets by loading solely the seen portion of the desk.
- Accessibility: ARIA attributes improve accessibility for customers with disabilities.
The right way to use it:
1. Load the Dropdown Desk jQuery plugin’s recordsdata within the doc.
<!-- jQuery is required --> <script src="/path/to/cdn/jquery.min.js"></script> <!-- jQuery Dropdown Desk --> <hyperlink rel="stylesheet" href="/path/to/dropdownTableStyles.css"> <script src="/path/to/dropdownTablePlugin.js"></script>
2. Create an autocomplete dropdown with static knowledge. On this instance, $('#static-dropdown') selects the enter aspect you need to improve. The columns array defines the desk headers and the corresponding keys in your knowledge objects. hiddenFields lets you retailer further knowledge related to every row with out displaying it. The knowledge array offers the static knowledge. useAjax is about to false, and width and restrict management the dropdown’s look and the variety of outcomes proven. The onSelect operate executes when a row is chosen.
<enter sort="textual content" id="static-example" placeholder="Search..." />
$('#static-example').dropdownTable({
columns: [
{ title: 'Invoice No', data: 'invoiceNo' },
{ title: 'Invoice Date', data: 'invoiceDate' },
{ title: 'Amount', data: 'amount' },
],
hiddenField: 'id', // Hidden discipline (e.g., major key)
knowledge: [
{ id: 1, invoiceNo: 'INVCVR2400099271', invoiceDate: '10/28/2024', amount: '33579.04' },
{ id: 2, invoiceNo: 'INVCVR2400099225', invoiceDate: '10/28/2024', amount: '2892.73' },
{ id: 3, invoiceNo: 'INVCVR2400099176', invoiceDate: '10/28/2024', amount: '37062.62' },
{ id: 4, invoiceNo: 'INVCVR2400099000', invoiceDate: '10/27/2024', amount: '12345.67' },
{ id: 5, invoiceNo: 'INVCVR2400098555', invoiceDate: '10/26/2024', amount: '54321.00' },
],
useAjax: false,
width: '450px',
restrict: 5,
onSelect: operate (selectedData) {
console.log('Chosen Information (Static):', selectedData);
},
});
3. For dynamic knowledge loading, modify the configuration to allow AJAX assist. Right here, useAjax is about to true, and ajaxURL specifies the endpoint to fetch knowledge from. The plugin will routinely ship a request to this URL because the person sorts within the enter discipline.
<enter sort="textual content" id="ajax-example" placeholder="Search..." />
$('#ajax-example').dropdownTable({
columns: [
{ title: 'Invoice No', data: 'invoiceNo' },
{ title: 'Invoice Date', data: 'invoiceDate' },
{ title: 'Amount', data: 'amount' },
],
hiddenField: 'id', // Hidden discipline (e.g., major key)
knowledge: [
{ id: 1, invoiceNo: 'INVCVR2400099271', invoiceDate: '10/28/2024', amount: '33579.04' },
{ id: 2, invoiceNo: 'INVCVR2400099225', invoiceDate: '10/28/2024', amount: '2892.73' },
{ id: 3, invoiceNo: 'INVCVR2400099176', invoiceDate: '10/28/2024', amount: '37062.62' },
{ id: 4, invoiceNo: 'INVCVR2400099000', invoiceDate: '10/27/2024', amount: '12345.67' },
{ id: 5, invoiceNo: 'INVCVR2400098555', invoiceDate: '10/26/2024', amount: '54321.00' },
],
useAjax: false,
width: '450px',
restrict: 5,
onSelect: operate (selectedData) {
console.log('Chosen Information (Static):', selectedData);
},
});
4. For eventualities requiring customers to pick a number of gadgets, allow the multiselect choice. The plugin will add a checkbox to every row of the desk and show the chosen data as tags on the prime of the enter discipline.
<enter sort="textual content" id="multi-example" placeholder="Search..." />
$("#select-dropdown").dropdownTable({
columns: [
{ title: "#", data: "id" },
{ title: "Invoice No", data: "invoice_no" },
{ title: "Invoice Date", data: "invoice_date" },
{ title: "Amount", data: "amount" },
{ title: "Customer", data: "customer" },
],
knowledge: [
{ id: 1, invoice_no: "INV001", invoice_date: "2023-07-01", amount: "$500", customer: "John Doe" },
{ id: 2, invoice_no: "INV002", invoice_date: "2023-07-02", amount: "$600", customer: "Jane Smith" },
{ id: 3, invoice_no: "INV003", invoice_date: "2023-07-03", amount: "$700", customer: "Chris Johnson" },
{ id: 4, invoice_no: "INV004", invoice_date: "2023-07-04", amount: "$800", customer: "Patricia Lee" },
],
width:'500px',
useSelectElement: true,
multiselect: true,
hiddenFields: ["id"],
hidePreselected: true,
onSelectionChange: operate (selectedRows) {
console.log("Chosen Rows:", selectedRows);
},
onSelect: operate (selectedRow) {
console.log("Single Chosen Row:", selectedRow);
},
});
5. All accessible choices.
$('#myInput').dropdownTable({
// Array of column objects { title: "Column Identify", knowledge: "key" }
columns: [],
// Static predefined values for the dropdown
knowledge: [],
// Whether or not to make use of AJAX for fetching knowledge
useAjax: false,
// URL for fetching knowledge through AJAX
ajaxURL: null,
// HTTP methodology for AJAX (GET or POST)
ajaxMethod: 'GET',
// Dynamic parameters for the AJAX request (object or operate)
ajaxParams: {},
// Minimal enter size to set off AJAX fetching
minLength: 3,
// Hidden keys (e.g., major keys) to incorporate in every row
hiddenFields: [],
// Index or title of the column to make use of because the default for the enter worth
defaultColumn: 0,
// Most variety of data to fetch/show
restrict: 10,
// Debounce time for enter occasions
debounceTime: 300,
// Allow ARIA attributes for accessibility
ariaEnabled: true,
// Width of the dropdown: 'auto' or a selected worth (e.g., '300px')
width: 'auto',
// Default loading message/spinner
loadingMessage: '<div class="loading-spinner">Loading...</div>',
// Default empty state message
emptyStateMessage: '<tr class="empty-state"><td colspan="100%">No knowledge discovered.</td></tr>',
// Non-compulsory customized row template (operate or string)
rowTemplate: null,
// Allow or disable multiselect mode
multiselect: false,
// Retailer chosen rows (utilized in multiselect mode)
selectedRows: [],
// Use a choose aspect as an alternative of a textual content enter for storing chosen values
useSelectElement: false,
// Optionally disguise preselected rows from the dropdown
hidePreselected: false,
// Callback operate when a row is chosen
onSelect: null,
// Callback when the choice modifications (multiselect mode)
onSelectionChange: null,
// Callback when the dropdown opens
onOpen: null,
// Callback when the dropdown closes
onClose: null,
});
This superior jQuery plugin is developed by nalindaDJ. For extra Superior Usages, please verify the demo web page or go to the official web site.
