Allows the contents of a table or list to be filtered by keyword.
JavaScript HTML CSS
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
dist
src
test
README.md
gulpfile.js
index.html
package.json

README.md

useful.filter.js: Simple data filtering functionality

Allows the contents of a table or list to be filtered by keyword.

Try the demo.

How to include the script

The stylesheet is best included in the header of the document.

<link rel="stylesheet" href="./css/useful-filter.css"/>

This include can be added to the header or placed inline before the script is invoked.

<script src="./js/useful-filter.js"></script>

To enable the use of HTML5 tags in Internet Explorer 8 and lower, include html5.js.

<!--[if lte IE 9]>
	<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

How to start the script

var filter = new useful.Filter().init({
	'element' : document.getElementById('id'),
	'keyword' : 'fieldset input',
	'button' : 'fieldset button',
	'grouping' : 'tbody tr, li',
	'data' : '*'
});

id : {string} - The ID attribute of an element somewhere in the document.

keyword : {string} - A CSS Rule inside the parent element that describes the input element for the keyword.

button : {string} - A CSS Rule inside the parent element that describes the button to apply the filter.

grouping : {string} - A CSS Rule inside the parent element that describes the rows of data.

data : {string} - A CSS Rule inside the grouping element that describes the data to be filtered.

Match

filter.match(text);

Perform a search.

text : {string} - The text to search for.

How to build the script

This project uses node.js from http://nodejs.org/

This project uses gulp.js from http://gulpjs.com/

The following commands are available for development:

  • npm install - Installs the prerequisites.
  • gulp import - Re-imports libraries from supporting projects to ./src/libs/ if available under the same folder tree.
  • gulp dev - Builds the project for development purposes.
  • gulp prod - Builds the project for deployment purposes.
  • gulp watch - Continuously recompiles updated files during development sessions.
  • gulp serve - Serves the project on a temporary web server at http://localhost:8000/ .

How to test the script

These test uses Selenium from http://docs.seleniumhq.org/

  • npm install webdriverjs - Installs the webdriver prerequisite.
  • npm install mocha -g - Installs the prerequisite test framework.
  • java -jar /Applications/Selenium/selenium-server-standalone-2.42.2.jar - Starts Selenium.
  • mocha - Runs the automated tests.

License

This work is licensed under a Creative Commons Attribution 3.0 Unported License. The latest version of this and other scripts by the same author can be found at http://www.woollymittens.nl/