Skip to content

Instantly share code, notes, and snippets.

@mrisney

mrisney/jquerybuilder-autocomplete-example.html

Last active February 26, 2023 04:50
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save mrisney/11c72eaa972361921d68e44eae47d127 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save mrisney/11c72eaa972361921d68e44eae47d127 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. mrisney renamed this gist Feb 26, 2023. 1 changed file with 0 additions and 0 deletions.
    0 index.html → jquerybuilder-autocomplete-example.html
    View file
    File renamed without changes.
  2. mrisney created this gist Feb 26, 2023.
    89 changes: 89 additions & 0 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,89 @@
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>jquerybuilder autocomplete example</title>

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.2.3/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jQuery-QueryBuilder/2.6.2/css/query-builder.default.min.css" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.13.6/css/selectize.min.css">

    </head>
    <body>

    <div class="container">
    <div id="builder"></div>
    </div>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.2/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/jquery-extendext@1.0.0/jquery-extendext.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/corejs-typeahead/1.3.1/typeahead.bundle.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap-select@1.13.18/dist/js/bootstrap-select.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/interactjs/dist/interact.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.13.6/js/standalone/selectize.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/corejs-typeahead/1.3.1/typeahead.bundle.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/jQuery-QueryBuilder/dist/js/query-builder.standalone.min.js"></script>


    <script>

    $(document).ready(function() {

    let namesList = [{ id: '1', name: 'andrew' }, { id: '2', name: 'bob' }, { id: '3', name: 'charles' }, { id: '4', name: 'david' }];

    let pluginConfig = {
    preload: true,
    valueField: 'id',
    labelField: 'name',
    searchField: 'name',
    options: namesList,
    items: ['2'],
    allowEmptyOption: true,
    plugins: ['remove_button'],
    onInitialize: function () { },
    onChange: function (value) {
    console.log(value);
    },
    valueSetter: function (rule, value) {
    rule.$el.find('.rule-value-container input')[0].selectize.setValue(value);
    },
    valueGetter: function (rule) {
    var val = rule.$el.find('.rule-value-container input')[0].selectize.getValue();
    return val.split(',');
    }
    }

    let filterList = [{
    id: 'age',
    type: 'integer',
    input: 'text'
    },
    {
    id: 'id',
    label: 'name',
    name: 'name',
    type: 'string',
    input: 'text',
    plugin: 'selectize',
    plugin_config: pluginConfig
    }];

    let options = {
    allow_empty: true,
    operators: ['equal', 'not_equal', 'greater', 'greater_or_equal', 'less', 'less_or_equal'],
    filters: filterList
    }
    $('#builder').queryBuilder(options);

    // Fix for Selectize
    $('#builder').on('afterCreateRuleInput.queryBuilder', function (e, rule) {
    if (rule.filter.plugin == 'selectize') {
    rule.$el.find('.rule-value-container').css('min-width', '200px').find('.selectize-control').removeClass('form-control');
    }
    });

    });
    </script>
    </body>
    </html>