jQuery-QueryBuilder

You can install jQuery QueryBuilder using npm, via CDN, or by downloading the release manually.

Using npm

$ npm install jQuery-QueryBuilder

Using CDN

Available via jsDelivr.

Manual Installation

Download the latest release from the GitHub releases page.

To initialize the jQuery QueryBuilder, call the .queryBuilder() method on a jQuery object. You can pass an optional options object to configure filters, operators, templates, and other settings.

When initialized, the QueryBuilder instance is attached to the DOM element's data via $el[0].queryBuilder.

The allow_groups setting controls whether users can group rules together. It accepts a boolean or an integer:

• false: Groups are disabled (internally set to 0).
• true: Groups are fully enabled (internally set to -1).
• int: Specific grouping behavior (as defined by the internal logic).

To use jQuery QueryBuilder, ensure the following dependencies are present in your project:

• jQuery 3
• Bootstrap 5 (CSS and bundle.js which includes Popper for tooltips and popovers)
• Bootstrap Icons
• jQuery.extendext

Optional Dependencies:

• MomentJS: Required for Date/Time validation.
• SQL Parser: Required for SQL methods.

Note: $.extendext is directly included in the standalone distribution file.

The QueryBuilder instance provides a wrapper around jQuery's event system to manage builder-specific events. All event names are automatically namespaced with .queryBuilder.

• on(type, cb): Attaches an event listener.
• off(type, cb): Removes an event listener.
• once(type, cb): Attaches an event listener that triggers only once.

Note that event names are transformed. For example, if you listen for changed, the underlying jQuery event will be changed.queryBuilder.

You can manually trigger events on the builder container using the trigger and change methods.

• trigger(type): Triggers a standard event. The event object will include the builder instance.
• change(type, value): Triggers an event and allows you to pass a value. This is useful for notifying the system of a state change while providing the new data. The event object will include both the builder instance and the value.

Event names are namespaced with .queryBuilder (and optionally .filter if using the change method).