structured-filter is a generic Web UI for building structured search or filter queries. With it you can build structured search queries like “Contacts where Firstname starts with ‘A’ and Birthday after 1/1/1980 and State in (CA, NY, FL)”… It is a full jQuery UI widget, supporting various configurations and themes.
Download: https://github.com/evoluteur/structured-filter
Demonstration: https://evoluteur.github.io/structured-filter/index.html
Plugin homepage: https://github.com/evoluteur/structured-filter
Implementation:
Options:
| buttonLabels | Boolean | Default : false – The labels of buttons used to manipulate filters. This options applies to the 3 buttons, “New filter”, “Add filter”/”Update filter” and “Cancel” which use icons if the option is set to false. |
| dateFormat | String | Default : mm/dd/yy – The format for parsed and displayed dates. This attribute is one of the regionalisation attributes. Common formats are: Default – “mm/dd/yy”, ISO 8601 – “yy-mm-dd”, Short – “d M, y”, Medium – “d MM, y”, Full – “DD, d MM, yy”. For a full list of the possib |
| fields | Object | Default : [ ] – The list of fields (as an array of objects with id, label and type) to participate in the query definition. Possible types are: text, boolean, number, date, time, and list. |
| submitButton | Boolean | Default : false – Shows or hides the “Submit” button. |
| submitReady | Boolean | Default : false – Provides hidden fields with the conditions’ values to be submitted with the form (as an alternative to an AJAX call). |
Methods:
| addCondition(data) | Function | Returns : Object – Adds a new filter condition. |
| clear() | Function | Removes all conditions. |
| length() | Function | Gets the number of conditions. |
| removeCondition(index) | Function | Returns : Integer – Removes the condition of the specified index. |
| val([data]) | Function | Gets or sets the filter definition (as an array of filters). |
| valText() | Function | Gets the filter definition (as a readable text string). |
| valUrl() | Function | Gets the filter definition (as a URL string). |
Screenshots:
