https://github.com/fetch/list-filter
Generic javascript list filter
https://github.com/fetch/list-filter
Last synced: 7 months ago
JSON representation
Generic javascript list filter
- Host: GitHub
- URL: https://github.com/fetch/list-filter
- Owner: fetch
- License: mit
- Created: 2014-10-21T16:22:36.000Z (over 11 years ago)
- Default Branch: master
- Last Pushed: 2015-10-09T11:17:30.000Z (over 10 years ago)
- Last Synced: 2025-06-01T15:52:57.591Z (10 months ago)
- Language: JavaScript
- Homepage: http://fetch.github.io/list-filter/example.html
- Size: 180 KB
- Stars: 0
- Watchers: 3
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
List Filter
==================
Simple list filter.
This plugin adds a class `hidden` to the items that doesn't match the criteria.
## Compatibility
Should work in IE8 and up. (not tested yet).
## Example
```html
- Lorem ipsum
- Ipsum dolore
- Dolore sit
- Sit amet
- Amet lorem
new ListFilter(document.querySelector('.js-search'), document.querySelector('.js-list'));
```
## Custom search function
It is possible to use a custom search function. For example the excellent [Fuzzysearch](https://github.com/bevacqua/fuzzysearch):
This function is called with the the input value, and should return a function that accepts the content of the list item.
```js
new ListFilter(document.querySelector('.js-search'), document.querySelector('.js-list'), {
search: function(needle) {
needle = needle.toLowerCase();
return function(haystack) {
return fuzzysearch(needle, haystack.toLowerCase());
};
}
});
```
## Known issues
`element.textContent` / `element.innerText` are not generally available, so search results may differ depending on the browser being used.