select-filter

Allows a select to call api to filter results in another select.L0

Install into project

yarn add @morsedigital/select-filter

Set up your HTML like so:

<select data-select-filter="second-select" data-select-filter-api="my/api/path" id="first-select">
  <option value="1">Option 1</option>
  <option value="2">Option 2</option>
</select>

<select id="second-select"> </select>

'data-select-filter' is id of the select you want updated

'data-select-filter-api' is the api path to where you are going to pull the data from.

In javascript add the following way:

import SelectFilter from "@morsedigital/select-filter";

(() => {
  SelectFilter();
})();

Then when the select is changes it will hit the api + value. So in this example if 'Option 1' is selected the a request is sent to 'my/api/path/1'.

The response should be as json like so:

[
  {
    "title": "Option",
    "value": "some value"
  },
  {
    "title": "Another Option",
    "value": "another value"
  }
]

and the select will be updated like so:

<select id="second-select">
  <option value="some value">Option</option>
  <option value="another value">Another Option</option>
</select>

You can also change the way the api is called.

If you prefer a query string:

import SelectFilter from "@morsedigital/select-filter";

(() => {
  SelectFilter({ query: true });
})();

Then when the select is changes it would call 'my/api/path?value=1'.

Or if you would prefer to POST the data for the following:

import SelectFilter from "@morsedigital/select-filter";

(() => {
  SelectFilter(
    { query: false },
    {
      method: "POST"
      //... other fetch options
      // see https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch
    }
  );
})();

Then when the select is changes it would call 'my/api/path' with a json body of { value: 1 }

Bug reports

If you discover any bugs, feel free to create an issue on GitHub. Please add as much information as possible to help us fixing the possible bug. We also encourage you to help even more by forking and sending us a pull request.

https://github.com/morsedigital/select-filter/issues

Contribute

If you'd like to contribute, @morsedigital/select-filter is written using babel and rollup in ES6.

Please make sure any additional code should be covered in tests (Jest).

If you need to run the test please use:

yarn test

or to rebuild the JS run:

yarn build

Maintainers

Adrian Stainforth (https://github.com/djforth)

License

@morsedigital/select-filter is an open source project falling under the MIT License. By using, distributing, or contributing to this project, you accept and agree that all code within the @morsedigital/select-filter project are licensed under MIT license.