Collecthor-search-query-builder NPM

Search-query-builder

This is a library for building search queries. It has a visual input and JSON output. All possible queries can be formed with a combination of AND and OR-statements.

Installation

Add the QueryBuilder.js and QueryBuilder.css to your project directory, install or use a cdn for choices.js then include as follows:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/choices.js/public/assets/styles/choices.min.css"/>
<script src="https://cdn.jsdelivr.net/npm/choices.js/public/assets/scripts/choices.min.js"></script>
<link rel="stylesheet" lang="css" href="QueryBuilder.css" />
<script src="QueryBuilder.js"></script>

Usage

QueryBuilder(element, fields)

  const builder = new QueryBuilder(element, fields);

element

Type: HTMLElement or string (where string is a valid id of an element). This should be a textarea or other input element, which can be in a form.

fields

Type: Object[] the name of the fields and their types. For object syntax, see example below.

Available condition types and their criteria

General (all but multiple choice)

Equal to (equal)
Not equal to (notequal)

Number

Greater than (greater)
Smaller than (smaller)
Between (between)

There are no "Greater/smaller than or equal to", these can be made by adjusting the criteria

Text

Includes (includes)
Does not include (notincludes)
Starts with (startswith)
Ends With (endswith)
Regular expression (regex)

Multiple choice

Is one of (isoneof)
Is all (isall)
Not all (notall)
Not one of (notoneof)

Single choice questions can be built by using isall and using only one item. Besides value, label and type, multiple choice questions also need a values field, indicating all possible values.

Sample field setup

[
    {
      "value": "score",
      "label": "Score",
      "type": "number",
    },
    {
      "value": "country",
      "label": "Country",
      "type": "text",
    },
    {
      "value": "favorite_color",
      "label": "Favorite Color",
      "type": "closed",
      "values": [
        {"value": "green", "label": "Green"},
        {"value": "bottlegreen", "label": "Best green"},
        {"value": "red", "label": "Red"},
        {"value": "blue", "label": "Blue"},
        {"value": "yellow", "label": "Yellow"},
        {"value": "orange", "label": "Orange"},
        {"value": "pink", "label": "Pink"},
        {"value": "black", "label": "Black"},
        {"value": "white", "label": "White"},
      ],
    }
  ]

The label value will be the displayed value in the dropdowns, the value value will be the value that is programatically returned (non-user facing).

Output

The output of this builder can be found in the "innerText" of the element that was given. It is stored as JSON. See an example output below:

[ // criterium list
  [ // criterium container
    { // criterium
      "criterium":"score",
      "condition":"greater",
      "value": 2
    },
    {
      "criterium":"favorite_color",
      "condition":"isoneof",
      "value": [
        "green"
      ]
    }
  ],
  [
    {
      "criterium":"favorite_color",
      "condition":"isoneof",
      "value": [
        "yellow"
      ]
    }
  ]
]

Testing:

This library contains tests in the file QueryBuilder.test.js. It is designed to use the JEST library. To run the tests locally follow the following steps: