evoluteur / structured-filter

jQuery UI widget for structured queries like "Contacts where Firstname starts with A and Birthday before 1/1/2000 and State in (CA, NY, FL)"...

structured-filter's Issues

Dropdown select filter

It would be nice to give a predefined list of values for a filter. For example, if the data that was being queried only had X options for a field, would be nice to show all of them and let the user select the one they wanted. Would use less screen space than a normal list of say 10 options, though would be limited to only one option?

Perhaps:

{ type: "selectList", id: "myID", label: "Birthmonth", list: [
  {id: "jan", label: "January"},
  {id: "feb", label: "February"},
  {id: "mar", label: "March"},
  {id: "apr", label: "April"},
  {id: "may", label: "May"},
  {id: "jun", label: "June"},
  {id: "jul", label: "July"},
  {id: "aug", label: "August"},
  {id: "sep", label: "September"},
  {id: "oct", label: "October"},
  {id: "nov", label: "November"},
  {id: "dec", label: "December"}
]}

and then:

case fTypes.selectList:
  var arrayLength = this._field.list.length;
  h+='<select id="value">'+EvoUI.optNull;
  for (var i = 0; i < arrayLength; i++) {
    h+=EvoUI.inputOption(this._field.list[i].id, this._field.list[i].label);
  }
  h+='</select>';
  break;

just a rough sketch of a possible way?

Perfomance on firefox

Hello I am using this plugin but seems like it gets really slow when adding/removing filters even in the demo page. Do you have any idea why it becomes slow on firefox?

Run time add new fields in structFilter

It's possible to add new fields object { id: "FieldID", type: "text", label: "FieldLabel" } in existing
structFilter.

$("#myFilter").structFilter({
fields: [
{type:"text", id:"lastname", label:"Lastname"},
{type:"text", id:"firstname", label:"Firstname"},
]
});

relative date option

It will be better if there is option relative date inside date field. I have shared sample screen link below please check it

Custom OR logic?

It would be awesome if I could do filtering like this:
{
{Username contains 'asdf' AND Lastname contains 'foo'}
OR
{Username startswith 'A' and age < 13}
}

This way a lot more flexible queries could be built

Auto Complete for all dropdowns

Feature Request:

It will be a very useful feature if we can provide autocomplete by typing in the dropdowns.

So that user doesn't have to find from dropdown.

Numbers: Greater/Less than or equal & between

Was there a reason to not have >= and <=, and between for numbers?

can't get the remove icon to show

hello,
thanks for the nice code, but I'm having a problem showing the x icon to remove the a single filter
i'm using bootstrap 3.3.7 and a custom jquery-ui theme for bootstrap

Either operator "does NOT contain", or negate the entire query

It would be awesome if queries like this could be made:
[
{ Username doesNOTcontain 'foo'}
]

or like this
[
{NOT Username contains "foo"}
]

This is especially helpful for strings, and less so for the other types.

Minor functionality broken with JQuery UI 1.12.1

Noticed the following behavior when JQuery UI 1.12.1 was used alongside this plugin:

• Close button/icon inside a filtering box (which is intended to remove the filter object from the list) does not remove the item, and instead opens it for editing

• Text description of filtering behaves oddly when being edited after initial creation. Would end up with odd strings like "Room does not contain 'a' does not contain 'b' does not contain 'c'"

Excellent plugin btw.

Can't get widget display to use the icons

I'm very interested in using this package,but I am having difficulty getting the widget display right.
I'm using jQuery 2.2.4, jQuery-ui 1.12.1.

I'm following the installation instructions per the documentation. I am attempting to use this in a Flask application that uses Jinja templating and bootstrap 3.Rather than getting the nice looking display in the demo, I am getting text rather than the icons, an unappealing looking filter list, and the filter list has no way to remove a filter. In short, the icons and attractive theming is not rendering. I've even tried explicitly setting the buttonLabels option to false.

... <script src="/static/js/jquery-2.2.4.js"></script> <script src="/static/jquery-ui-1.2.1/jquery-ui.js"></script> <script src="/static/bootstrap-3.3.7/dist/js/bootstrap.js" crossorigin="anonymous"></script> <script src="/static/structured-filter-master/js/structured-filter.js"></script>

Can you assist? Thank you

Restore filter from valUrl

I get the filter url:
let filterUrlFormat = $('#sonarioFilter').structFilter('valUrl');

Then I try to set the filter, but it fails to do anything:
$('#sonarioFilter').structFilter('valUrl',"filters=1&field-0=Gender&operator-0=eq&value-0=male&label=Gender%20equals%20%22male%22%20");

Is there something I'm missing?

Exclusive list

It would be nice to have a list but with radio buttons so only one option is ever selected.

Perhaps:

{ type: "exclusiveList", id: "myID", label: "Fancy Exclusive List", list: [
  {id: "opt1", label: "First Option"},
  {id: "opt2", label: "Second Option"},
  {id: "opt3", label: "Third Option"}
]}

And then

case fTypes.exculsiveList:
  var arrayLength = this._field.list.length;
  h+='<span id="value">';
  for (var i = 0; i < arrayLength; i++) {
    h+= EvoUI.inputRadio(this._field.list[i].label, this._field.list[i].id, this._field.list[i].label, v==this._field.list[i].id, 'value' + this._field.list[i].id);
  }
  h +='</span>';
  break;

Haven't looked too deeply into this, I know there would need to be a few more changes to bring this in.

issue while retrieving value from structured-filter

I am integrating this component, and after filter changed or submit i am posting those values to some link...
while retrieving value from component i am getting some issue..
Please help me where i doing worng

adding error stack
(index):48 Uncaught TypeError: $(...).structFilter is not a function
at updateValue ((index):48)
at HTMLDivElement. ((index):95)
at HTMLDivElement.dispatch (jquery.min.js:3)
at HTMLDivElement.q.handle (jquery.min.js:3)
at Object.trigger (jquery.min.js:4)
at HTMLDivElement. (jquery.min.js:4)
at Function.each (jquery.min.js:2)
at r.fn.init.each (jquery.min.js:2)
at r.fn.init.trigger (jquery.min.js:4)
at t.(:8570/anonymous function).(anonymous function)._triggerChange (http://localhost:8570/Scripts/structured-filter.js:599:16)
updateValue @ (index):48
(anonymous) @ (index):95
dispatch @ jquery.min.js:3
q.handle @ jquery.min.js:3
trigger @ jquery.min.js:4
(anonymous) @ jquery.min.js:4
each @ jquery.min.js:2
each @ jquery.min.js:2
trigger @ jquery.min.js:4
_triggerChange @ structured-filter.js:599
(anonymous) @ jquery-ui.min.js:6
addCondition @ structured-filter.js:264
(anonymous) @ jquery-ui.min.js:6
(anonymous) @ structured-filter.js:144
dispatch @ jquery.min.js:3
q.handle @ jquery.min.js:3

Not Between

Another small enhancement could be to add an option for "not between" (nbw). I think it is just about as simple as adding the label, API, and adding it to the validation of sBetween?

It could also be nice to enable between and not between for numbers (though this is already possible by doing both a greater than and a less than filter)

Boolean returns Yes / 1, regardless if Yes or No is selected

Whether the users choose the Yes or No radio button in the UI, a boolean field type filter is always set to Yes / 1.

Demo link broken

Should be https://evoluteur.github.io/structured-filter/ I guess

Disable operators

In options array

 disableOperators: false

In _setEditorOperator method at the begin

if(this.options.disableOperators) {
        this._step=2;
        return this._setEditorValue();
}

Remove issue

Remove from X button not trigger change.search.

Filrer as OData query

Hi there, first of all thank You for such great project. I'm wondering if it is possible to create OData query from filter build with Your builder.
I'd like to use Your builder to create filter that could be send to OData endpoint.

conflict between structured filter styles and Bootstrap buttons

Having trouble getting the x close synble to show up on the filters

After i create a filter. The little x to remove the filter will not show up. Could you point me in the direction to resolve this?

Im including jquery base css and light theme css and jquery jquery ui and the project js

Thank you for your time in advanced.

Collision with Bootstrap Javascript

The css for structured-filter does not work if used with bootstrap.

The offender is not in the css, but in the javascript. To reproduce the problem, simply add the following,

    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">

    <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

Then lower the jquery version to something under version 3, which bootstrap doesn't like. Then the styling will go away.

It only occurs when the .js is there, removing the bootstrap css and leaving the js causes the problem.