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.

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.

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

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

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?

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

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

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

In options array

 disableOperators: false

In _setEditorOperator method at the begin

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

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?

Remove from X button not trigger change.search.

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

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?

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.

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.

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"},
]
});

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.

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.

Can you assist? Thank you

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

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.

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.

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)