Basic QueryBuilder Usage

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="https://rawgit.com/mistic100/sql-parser/master/browser/sql-parser.js"></script>
<link rel="stylesheet" href="https://rawgit.com/mistic100/jQuery-QueryBuilder/master/dist/css/query-builder.default.min.css">
<script src="https://rawgit.com/mistic100/jQuery-QueryBuilder/master/dist/js/query-builder.standalone.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.full.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css">
<div id="builder-widgets"></div>

CSS

body {
  margin: 15px;
}

#getsql {
  border: 1px solid #555;
  ;
  padding: 6px 18px;
}

#queryBuilderGoesHere {
  border-bottom: 1px solid navy;
}

.ltblue {
  background: lightblue;
  color: white;
  font-weight: bold;
}

#sql {
  border: 1px solid lightblue;
  padding: 15px
}

JavaScript

var rules_widgets = {
      condition: 'OR',
      rules: [{
        id: 'category',
        operator: 'equal',
        value: '38'
      }]
    };

    $('#builder-widgets').queryBuilder({
      plugins: ['bt-tooltip-errors'],
      filters: [{
        id: 'category',
        label: 'select2',
        type: 'string',
        plugin: 'select2',
        plugin_config: {
          ajax: {
            url: "https://api.github.com/search/repositories",
            dataType: 'json',
            delay: 250,
            data: function (params) {
              return {
                q: params.term, // search term
                page: params.page
              };
            },
            processResults: function (data, params) {
              // parse the results into the format expected by Select2
              // since we are using custom formatting functions we do not need to
              // alter the remote JSON data, except to indicate that infinite
              // scrolling can be used
              params.page = params.page || 1;

              return {
                results: data.items,
                pagination: {
                  more: (params.page * 30) < data.total_count
                }
              };
            },
            cache: true
        },
        escapeMarkup: function (markup) { return markup; }, // let our custom formatter work
        minimumInputLength: 1,
        templateResult: formatRepo, // omitted for brevity, see the source of this page
        templateSelection: formatRepoSelection // omitted for brevity, see the source of this page
        },
        valueSetter: function(rule, value) {}
      }],
      rules: rules_widgets
    })
    
    function formatRepo (repo) {
      if (repo.loading) return repo.text;

      var markup = "<div class='select2-result-repository clearfix'>" +
        "<div class='select2-result-repository__avatar'><img src='" + repo.owner.avatar_url + "' /></div>" +
        "<div...