Query builder custom operators


<!DOCTYPE html>
<html>

  <head>
    <base href="." />
    <title>angular2 playground</title>
    <link rel="stylesheet" href="style.css" />
    
    <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"></style>

    <script src="https://cdn.jsdelivr.net/jquery/3.1.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

    <!-- jQuery querybuilder plugin -->
    <script src="https://cdn.jsdelivr.net/jquery.query-builder/2.4.1/js/query-builder.standalone.min.js"></script>
    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/jquery.query-builder/2.4.1/css/query-builder.default.min.css"></style>
    
  
    <script src="script.js"></script>
  </head>

  <body>
    <div id="builder"></div>
  </body>

</html>

// Add your javascript here
$(function(){
  $("h1").animate({
    "margin-left": "100px"
  }, "slow");
  
  $('#builder').queryBuilder({
      plugins: ['bt-tooltip-errors'],
      
      operators: [
        'equal', 'not_equal', 'is_null',
         { type: 'contains_any', nb_inputs: 2, multiple: true, apply_to: ['string'] },
      ],
      
      filters: [{
        id: 'name',
          label: 'Name',
          type: 'string',
          operators: ['equal', 'not_equal', 'is_null']
        }, {
          id: 'category',
          label: 'Category',
          type: 'integer',
          input: 'select',
          values: {
            1: 'Books',
            2: 'Movies',
            3: 'Music',
            4: 'Tools',
            5: 'Goodies',
            6: 'Clothes'
          },
          operators: ['equal', 'not_equal', 'contains_any']
        },
      ]
    });
});

/* Put your css in here */

h1 {
  color: red;
}