Filter rule builder js что это такое

How to implement JQuery Query Builder rule filter autocomplete

After spending lot of time with JQuery query builder extensions to make rule filter as autocomplete functionalities.

$('#build-query').queryBuilder( < plugins: ['sortable', 'bt-tooltip-errors', 'bt-checkbox', 'invert', 'not-group', 'filter-description'], allow_empty: true, filters: result, rules: customFilters, icons: < add_group: 'fa fa-plus-square', add_rule: 'fa fa-plus-circle', remove_group: 'fa fa-minus-square', remove_rule: 'fa fa-minus-circle', error: 'fa fa-exclamation-triangle', sortable: 'fa fa-exclamation-triangle' >>).on('afterCreateRuleFilters.queryBuilder', function (e, rule) < rule.$el.find(QueryBuilder.selectors.rule_filter).selectpicker(< liveSearch: true, style:'width: 500px;', >); >); 

Please make sure you add supporting javascript references like Jquery builder standlone.js, css Bootstrap.js , css bootstrap selectpicker js , css

answered Aug 18, 2021 at 17:04
Muni Chittem Muni Chittem
1,008 10 10 silver badges 17 17 bronze badges

You need to configure a plugin, and use the selectize plugin

const namesList = [< id: '1', name: 'andrew' >, < id: '2', name: 'bob' >, < id: '3', name: 'charles' >, < id: '4', name: 'david' >, < id: '5', name: 'emily' >, < id: '6', name: 'frank' >, < id: '7', name: 'george' >, < id: '8', name: 'harry' >, < id: '9', name: 'isabelle' >, < id: '10', name: 'jerry' >]; let pluginConfig = < preload: true, valueField: 'id', labelField: 'name', searchField: 'name', options: namesList, items: ['2'], allowEmptyOption: true, plugins: ['remove_button'], onInitialize: function () < >, onChange: function (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: 'name', 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'); >>); // Capture the change event $('#builder').on('afterCreateRuleInput.queryBuilder', function (e, rule) < var filter = rule.filter; var input = rule.$el.find('.rule-value-container input'); if (filter.id === 'name') < input.on('change', function () < console.log('name value changed to: ' + input.val()); let filtersJSON = $('#builder').queryBuilder('getRules', < allow_invalid: true >); console.log(JSON.stringify(filtersJSON, null, 2)); >); > >); 

Webix UI 4.4 Release Overview

The new release 4.4 of Webix JavaScript UI library is available for download. Let’s have a look at the changes and new functionality: Print API, Query Builder, Demos of Integration with PHP, Node.js and .NET.

Printing from Applications

• the print area
• the paper size
• the margins
• page orientation and scale
• headers, grid lines and empty rows printing

The variety of printing options depends on the type of a widget. The complex widget Spreadsheet features a built-in printing functionality:

Advanced Filtering

Query Builder, the 89th Webix widget, is a constructor of complex rules for filtering. You can use it with any data components of the library. From now on, the DataTable widget allows using the Query Builder as a built-in filter.

The new widget allows building complex filters by grouping several rules (or even groups of rules) based on the specified conditions (AND or OR). Each rule includes a criterion that the filtered values should meet. Query Builder widget is available only for Webix PRO.

Clear Integration with Backend Platforms

The new demos, that can be found on GitHub, are aimed at simplifying integration with:

The demos show how to connect Webix UI with these backend platforms. We are planning to expand the list of demos on integration with backend platforms.

The Site Update

You must have noticed that the Webix site looks different. We are doing our best to keep up with the times and gradually adding new parts to the site. We have added a page with video tutorials, simplified the form on the Trial download page of Webix PRO with all complex widgets, upgraded the license page. From now on you can add the necessary number of licenses for complex widgets to your Team Pack.

Minor Changes

Disabled menu items

We added the special attribute for the Menu widget. This attribute allows disabling certain menu items during the initialization of the component.

Updated integration with Google Maps

Integration with Google Maps was improved and included into the library as a separate widget. Since version 4.4 we have removed the outdated integration from the components repository on GitHub and from CDN.

You can find the complete list of changes on the What’s new page.

Try the Trial version of Webix PRO with complex widgets Pivot, Kanban, Scheduler, Spreadsheet, File Manager and feel free to give your feedback. Clients with an active license can download the new release from the Client Area or via CDN.

Meanwhile we are working on release 5.0. It will include awesome updates and long-expected features ��

Written by

• Bio
• Latest Posts

Array.prototype.filter()

Метод filter() создаёт новый массив со всеми элементами, прошедшими проверку, задаваемую в передаваемой функции.

Интерактивный пример

Синтаксис

// Стрелочная функция filter((element) =>  . > ) filter((element, index) =>  . > ) filter((element, index, array) =>  . > ) // Колбэк-функция filter(callbackFn) filter(callbackFn, thisArg) // Встроенная колбэк-функция filter(function callbackFn(element)  . >) filter(function callbackFn(element, index)  . >) filter(function callbackFn(element, index, array) . >) filter(function callbackFn(element, index, array)  . >, thisArg) 

Параметры

Функция-предикат, которая будет вызвана для проверки каждого элемента массива. Если функция возвращает true , то элемент остаётся в массиве, если false , то удаляется.

Принимает три аргумента

Текущий обрабатываемый элемент в массиве.

Индекс текущего обрабатываемого элемента в массиве.

Обрабатываемый массив, на котором был вызван метод filter() .

Значение, используемое в качестве this при вызове колбэк-функции callbackFn .

Возвращаемое значение

Вернётся новый массив с элементами, которые прошли проверку. Если ни один элемент не прошёл проверку, то будет возвращён пустой массив.

Описание

Метод filter() вызывает переданную функцию callback один раз для каждого элемента, присутствующего в массиве, и создаёт новый массив со всеми значениями, для которых функция callback вернула значение, которое может быть приведено к true . Функция callback вызывается только для индексов массива с уже определёнными значениями; она не вызывается для индексов, которые были удалены или которым значения никогда не присваивались. Элементы массива, не прошедшие проверку функцией callback , просто пропускаются и не включаются в новый массив.

Функция callback вызывается с тремя аргументами:

1. значение элемента;
2. индекс элемента;
3. массив, по которому осуществляется проход.

Если в метод filter() был передан параметр thisArg , при вызове callback он будет использоваться в качестве значения this . В противном случае в качестве значения this будет использоваться значение undefined . В конечном итоге, значение this , наблюдаемое из функции callback , определяется согласно обычным правилам определения this .

Метод filter() не изменяет массив, для которого он был вызван.

Элементы массива, обрабатываемые методом filter() , устанавливается до первого вызова функции callback . Элементы, добавленные в массив после начала выполнения метода filter() , либо изменённые в процессе выполнения, не будут обработаны функцией callback . Соответствующим образом, если существующие элементы удаляются из массива, они также не будут обработаны

Предупреждение: одновременное изменение элементов, описанное в предыдущем параграфе, часто приводит к труднопонимаемому коду, поэтому не рекомендуется делать это (за исключением особых случаев).

Примеры

Фильтрация всех маленьких значений

Следующий пример использует filter() для создания отфильтрованного массива, все элементы которого больше или равны 10, а все меньшие 10 удалены.

function isBigEnough(value)  return value >= 10; > let filtered = [12, 5, 8, 130, 44].filter(isBigEnough); // массив filtered теперь содержит [12, 130, 44] 

Найти все простые числа в массиве

Следующий пример возвращает все простые числа в массиве:

const array = [-3, -2, -1, 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13]; function isPrime(num)  for (let i = 2; num > i; i++)  if (num % i == 0)  return false; > > return num > 1; > console.log(array.filter(isPrime)); // [2, 3, 5, 7, 11, 13] 

Фильтрация неверных записей в JSON

В следующем примере метод filter() используется для создания отфильтрованного JSON-объекта, все элементы которого содержат ненулевое числовое поле id .

let arr = [  id: 15 >,  id: -1 >,  id: 0 >,  id: 3 >,  id: 12.2 >, >,  id: null >,  id: NaN >,  id: "undefined" >, ]; let invalidEntries = 0; function filterByID(item)  if (Number.isFinite(item.id) && item.id !== 0)  return true; > invalidEntries++; return false; > let arrByID = arr.filter(filterByID); console.log("Отфильтрованный массив\n", arrByID); // Отфильтрованный массив // [< id: 15 >, < id: -1 >, < id: 3 >, < id: 12.2 >] console.log("Количество некорректных элементов token punctuation">, invalidEntries); // Количество некорректных элементов = 5 

Поиск в массиве

В следующем примере filter() используется для фильтрации содержимого массива на основе входных данных.

var fruits = ["apple", "banana", "grapes", "mango", "orange"]; /** * Элементы массива фильтруется на основе критериев поиска (query) */ function filterItems(query)  return fruits.filter(function (el)  return el.toLowerCase().indexOf(query.toLowerCase()) > -1; >); > console.log(filterItems("ap")); // ['apple', 'grapes'] console.log(filterItems("an")); // ['banana', 'mango', 'orange'] 

Реализация с использованием ES2015

const fruits = ["apple", "banana", "grapes", "mango", "orange"]; /** * Элементы массива фильтруется на основе критериев поиска (query) */ const filterItems = (arr, query) =>  return arr.filter( (el) => el.toLowerCase().indexOf(query.toLowerCase()) !== -1, ); >; console.log(filterItems(fruits, "ap")); // ['apple', 'grapes'] console.log(filterItems(fruits, "an")); // ['banana', 'mango', 'orange'] 

Модификация изначального массива (изменение, добавление и удаление)

В следующих примерах проверяется поведение метода filter при изменении массива.

// Изменение всех элементов let words = ["spray", "limit", "exuberant", "destruction", "elite", "present"]; const modifiedWords = words.filter((word, index, arr) =>  arr[index + 1] += " extra"; return word.length  6; >); console.log(modifiedWords); // Обратите внимание, что есть три слова длиной менее 6, но так как они были изменены, // возвращается одно слово ['spray'] // Добавление новых элементов words = ["spray", "limit", "exuberant", "destruction", "elite", "present"]; const appendedWords = words.filter((word, index, arr) =>  arr.push("new"); return word.length  6; >); console.log(appendedWords); // Только три слова удовлетворяют условию, хотя `words` теперь имеет куда больше слов, // длинной меньше 6 символов: ['spray', 'limit', 'elite'] // Удаление элементов words = ["spray", "limit", "exuberant", "destruction", "elite", "present"]; const deleteWords = words.filter((word, index, arr) =>  arr.pop(); return word.length  6; >); console.log(deleteWords); // Заметьте, что 'elite' не получено, так как удалено из `words` до того, // как filter смог получить его: ['spray', 'limit'] 

Спецификации

Specification
ECMAScript Language Specification # sec-array.prototype.filter

Поддержка браузерами

BCD tables only load in the browser

Смотрите также

• Полифил Array.prototype.filter в библиотеке core-js
• Array.prototype.forEach()
• Array.prototype.every()
• Array.prototype.some()
• Array.prototype.reduce()
• Array.prototype.find()

Found a content problem with this page?

• Edit the page on GitHub.
• Report the content issue.
• View the source on GitHub.

This page was last modified on 4 авг. 2023 г. by MDN contributors.

Your blueprint for a better internet.

jQuery QueryBuilder

Compiled and minified files with examples and sources.

Content Delivery Network

The package is available on jsDelivr.

Install with npm

You can also get all necessary files and dependencies with npm.

$ npm install jQuery-QueryBuilder

Overview

QueryBuilder is an UI component to create queries and filters.

• It can be used on advanced search engine pages, administration backends, etc.
• It is highly customizable and is pluggable to many jQuery widgets like autocompleters, sliders and datepickers.
• It outputs a structured JSON of rules which can be easily parsed to create SQL/NoSQL/whatever queries.
• And it also comes with a set of greatplugins and has a full events system for even more features.

The full code of this example can be found here.

Getting started

Dependencies

• jQuery >= 1.10
• Bootstrap >= 3.1 (CSS Buttons and Utilities only)
• $.extendext
• MomentJS (optional, for Date/Time validation)
• Other libraries used by plugins

Don’t want to use Bootstrap ?

Let’s go!

Include query-builder.css in your page head and query-builder.js after the dependencies. Then add QueryBuilder to any you want.

 id="builder">

require(['jquery', 'query-builder'], function($)  $('#builder').queryBuilder( filters: [ . ] >); >);

optgroups:  core: '-- Core', plugins: '-- Plugins' >

optgroups:  core:  'en': '-- Core', 'fr': '-- Coeur', 'de': '-- Kern' > >

label:  'en': 'Name', 'fr': 'Nom', 'es': 'Nombre' >

values: ['one', 'two', 'three']

values:  'one': 'Un', 'two': 'Deux', 'three': 'Trois' >

values: [ 'one': 'Un'>, 'two': 'Deux'>, 'three': 'Trois'> ]

values: [  value: 'one', label: 'Un', optgroup: 'Group 1' >,  value: 'two', label: 'Deux', optgroup: 'Group 2' >,  value: 'three', label: 'Trois' > // no group ]

validation:  format: /^(?:[0-9]\.)[0-9] $/, messages:  format: 'The provided IP is not valid' > >

$('#builder').queryBuilder('methodName', param_1, param_2);

$('#builder')[0].queryBuilder.methodName(param_1, param_2);

// get all rules $('#builder').queryBuilder('getRules'); // get all rules and their flags when applicable $('#builder').queryBuilder('getRules',  get_flags: true >);

$('#builder').queryBuilder('setRules',  . >);

 "condition": "AND", "rules": [  "id": "price", "field": "price", "type": "double", "input": "text", "operator": "less", "value": "10.25" >,  "condition": "OR", "rules": [  "id": "category", "field": "category", "type": "integer", "input": "select", "operator": "equal", "value": "2" >,  "id": "category", "field": "category", "type": "integer", "input": "select", "operator": "equal", "value": "1" > ] > ] >

$('#builder').queryBuilder('setRules',  condition: 'AND', data:  // group data foo: 'bar' >, rules: [  /* rule definition */ data:  // rule data foo: 'bar' > > ] >);

$('#builder').queryBuilder('setRules',  condition: 'AND', rules: [  /* standard rule */ >,  /* empty rule */ empty: true > ] >);

 filter_readonly: true, operator_readonly: true, value_readonly: true, no_delete: true >

 condition_readonly: true, no_add_rule: true, no_add_group: true, no_delete: true >

var root_model = $('#builder').queryBuilder('getModel'); var last_node_model = $('#builder').queryBuilder('getModel', $('#builder .rule-container').last());

$('#builder').queryBuilder('reset');

$('#builder').queryBuilder('destroy');

$('#builder').on('validationError.queryBuilder', function(e, rule, error, value)  // never display error for my custom filter if (rule.filter.id == 'my_custom_filter')  e.preventDefault(); > >);

$('#builder').on('getGroupTemplate.queryBuilder.filter', function(e, level)  if (level == 1)  e.value = /* . */ > >);

operators: ['equal', 'not_equal']

operators: [  type: 'equal', optgroup: 'basic' >,  type: 'not_equal', optgroup: 'basic' >,  type: 'geo', optgroup: 'custom', nb_inputs: 3, multiple: false, apply_to: ['number'] > ]