generator-multifiltersjs

Select multiple input of the same group to perform a filter that is made via js

Usage no npm install needed!

<script type="module">
  import generatorMultifiltersjs from 'https://cdn.skypack.dev/generator-multifiltersjs';
</script>

README

MultiFilters JS

Select multiple input of the same group to perform a filter that is made via js

Bower.io

This package is available on Bower.

Install Bower.io

$ npm install -g bower

Installing

# install a package and add it to bower.json
$ bower install generator-multifiltersjs --save

Bower depends on Node.js and npm. Also make sure that git is installed as some bower packages require it to be fetched and installed.

Usage

DEMO

Call the plugin on any input you want to track and tell it what to look for with a data-col attribute:

$(document).ready(function() {
  $('#formGroupFilters .form-control').multifiltersJS({
    'target' : $('#table-dados')
  });
})

As long as the data-col attribute matches up with something in the , it will filter the content in those columns in the table:


data-col='Filter1'

data-col='Filter2'

data-col='Filter3'

<div class="form-group" id="formGroupFilters">
  <div class="control-group">
    <label for="txt-filter1" class="control-label">Filter1</label>
    <div class="controls">
      <input type="text" id="txt-filter1" name="txt-filter1" class="form-control" data-col='Filter1'>
    </div>
  </div>

  <div class="control-group">
    <label for="filter2" class="control-label">Filter2</label>
    <div class="controls">
      <input type="text" id="txt-filter2" name="txt-filter2" class="form-control" data-col='Filter2'>
    </div>
  </div>

  <div class="control-group">
    <label for="txt-filter3" class="control-label">Filter3</label>
    <div class="controls">
      <input type="text" id="txt-filter3" name="txt-filter3" class="form-control" data-col='Filter3'>
    </div>
  </div>
</div>

Contributing

  1. Fork it
  2. Create your feature branch (git checkout -b my-new-feature)
  3. Test your changes to the best of your ability.
  4. Update the documentation to reflect your changes if they add or changes current functionality.
  5. Commit your changes (git commit -am 'Added some feature')
  6. Push to the branch (git push origin my-new-feature)
  7. Create new Pull Request

Creator

Created by Ivan Augusto Hoinacki

License

MIT License