Filter.js is a easy-to-use jQuery plugin that makes filtering a large amount of resources a piece of cake. With Filter.js you can filter resources that are in an element while simultaneously retrieving additional resources that may not be displayed in a table. filter.js allows you to filter paginated data that is not loaded on the client yet.
This plugin works well with more.js.
Filter.js is relatively easy to setup.
- A URL to fetch additional resources from
- Element selector to populate filtered resources with. The table is cleared every keyup.
- Element selector to get the query string from.
- Function to build HTML from returned data.
<html>
<body>
<input name="filter" type="text" placeholder="Filter resources…" id="filter">
<table id="resources-table">
...
</table>
<script>
var currentPage = 1; // This MUST be defined
$("#filter").filter({
url: "http://example.com/resources/json",
dataType: "xml", // defaults to json
queryParam: "query", // defaults to 'q'
pageParam: "p", // defaults to "page"
table: "#resources-table",
buildEntries: function(json) {
currentPage = 1;
var html = ...
return html;
}
});
</script>
</body>
</html>filter.js is licensed under the MIT License. The full text can be found in the LICENSE.md