├── .github ├── ISSUE_TEMPLATE │ ├── bug_report.md │ └── feature_request.md └── workflows │ └── npm-publish.yml ├── LICENSE ├── README.md ├── demo.html ├── live-filter.js └── package.json /.github/ISSUE_TEMPLATE/bug_report.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: Bug report 3 | about: Create a report to help us improve 4 | title: '' 5 | labels: bug 6 | assignees: daviddarnes 7 | 8 | --- 9 | 10 | **Describe the bug** 11 | A clear and concise description of what the bug is. 12 | 13 | **To Reproduce** 14 | Steps to reproduce the behaviour: 15 | 1. Go to '...' 16 | 2. Click on '....' 17 | 3. Scroll down to '....' 18 | 4. See error 19 | 20 | **Expected behaviour** 21 | A clear and concise description of what you expected to happen. 22 | 23 | **Screenshots** 24 | If applicable, add screenshots to help explain your problem. 25 | 26 | **Desktop (please complete the following information):** 27 | - OS: [e.g. iOS] 28 | - Browser [e.g. chrome, safari] 29 | - Version [e.g. 22] 30 | 31 | **Smartphone (please complete the following information):** 32 | - Device: [e.g. iPhone6] 33 | - OS: [e.g. iOS8.1] 34 | - Browser [e.g. stock browser, safari] 35 | - Version [e.g. 22] 36 | 37 | **Additional context** 38 | Add any other context about the problem here. 39 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/feature_request.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: Feature request 3 | about: Suggest an idea for this project 4 | title: '' 5 | labels: enhancement 6 | assignees: daviddarnes 7 | 8 | --- 9 | 10 | **Is your feature request related to a problem? Please describe.** 11 | A clear and concise description of what the problem is. Ex. I'm always frustrated when [...] 12 | 13 | **Describe the solution you'd like** 14 | A clear and concise description of what you want to happen. 15 | 16 | **Describe alternatives you've considered** 17 | A clear and concise description of any alternative solutions or features you've considered. 18 | 19 | **Additional context** 20 | Add any other context or screenshots about the feature request here. 21 | -------------------------------------------------------------------------------- /.github/workflows/npm-publish.yml: -------------------------------------------------------------------------------- 1 | name: Node.js Package 2 | 3 | on: 4 | release: 5 | types: [created] 6 | 7 | jobs: 8 | publish-npm: 9 | runs-on: ubuntu-latest 10 | steps: 11 | - uses: actions/checkout@v3 12 | - uses: actions/setup-node@v3 13 | with: 14 | node-version: 16 15 | registry-url: https://registry.npmjs.org/ 16 | - run: npm install 17 | - run: npm publish 18 | env: 19 | NODE_AUTH_TOKEN: ${{secrets.npm_token}} 20 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2023 David Darnes 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # `live-filter` 2 | 3 | A Web Component for filtering items using a text input. 4 | 5 | **[Demo](https://daviddarnes.github.io/live-filter/demo.html)** | **[Further reading](https://darn.es/live-filter-web-component/)** 6 | 7 | ## Examples 8 | 9 | General usage example: 10 | 11 | ```html 12 | 13 | 14 | 15 | 16 | 22 | 23 | ``` 24 | 25 | Example setting the `selector` option to select `dt` elements: 26 | 27 | ```html 28 | 29 | 30 | 31 | 32 |
33 |
Beast of Bodmin
34 |
A large feline inhabiting Bodmin Moor.
35 |
Morgawr
36 |
A sea serpent.
37 |
Owlman
38 |
A giant owl-like creature.
39 |
40 | 41 | ``` 42 | 43 | Example setting the `case` option to change the search to be case insensitive: 44 | 45 | ```html 46 | 47 | 48 | 49 | 50 | 56 | 57 | ``` 58 | 59 | ## Features 60 | 61 | This Web Component allows you to: 62 | 63 | - Filter a list using a text input field 64 | - Control how the filtering is presented by using CSS to hook into element attributes `data-live-filter-match="true"` and `data-live-filter-match="false"` 65 | - Adjust what items are filtered using the `selector` attribute on the `live-filter` element itself 66 | - Adjust the case sensitivity of searching using the `case` attribute on the `live-filter` element itself 67 | 68 | ## Installation 69 | 70 | You have a few options (choose one of these): 71 | 72 | 1. Install via [npm](https://www.npmjs.com/package/@daviddarnes/live-filter): `npm install @daviddarnes/live-filter` 73 | 1. [Download the source manually from GitHub](https://github.com/daviddarnes/live-filter/releases) into your project. 74 | 1. Skip this step and use the script directly via a 3rd party CDN (not recommended for production use) 75 | 76 | ### Usage 77 | 78 | Make sure you include the ` 83 | ``` 84 | 85 | ```html 86 | 87 | 91 | ``` 92 | 93 | ```html 94 | 95 | 99 | ``` 100 | 101 | ### Using `selector` and `case` 102 | 103 | By default `live-filter` will select all the `li` elements within it to search through. However with the `selector` attribute you can pass in a different selector string to search through: 104 | 105 | ```html 106 | 107 | 108 | 109 | ``` 110 | 111 | By default `live-filter` will be case sensitive, which can be restrictive when searching through proper nouns and titles. This can be adjusted using the `case` attribute and setting the value to `insensitive`: 112 | 113 | ```html 114 | 115 | 116 | 117 | ``` 118 | 119 | ## Credit 120 | 121 | With thanks to the following people: 122 | 123 | - [Zach Leatherman](https://zachleat.com) for inspiring this [Web Component repo template](https://github.com/daviddarnes/component-template) 124 | -------------------------------------------------------------------------------- /demo.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | live-filter Web Component Demo 8 | 9 | 23 | 24 | 25 | 26 | 27 |

General usage example

28 | 29 | 30 | 36 | 37 | 38 |
39 |

40 | Example setting the selector option to select 41 | dt elements 42 |

43 | 44 | 45 |
46 |
Beast of Bodmin
47 |
A large feline inhabiting Bodmin Moor.
48 |
Morgawr
49 |
A sea serpent.
50 |
Owlman
51 |
A giant owl-like creature.
52 |
53 | 54 | 55 |
56 |

57 | Example setting the case option to change the search to be 58 | case insensitive 59 |

60 | 61 | 62 | 68 | 69 | 70 | 71 | -------------------------------------------------------------------------------- /live-filter.js: -------------------------------------------------------------------------------- 1 | class LiveFilter extends HTMLElement { 2 | static register(tagName) { 3 | if ("customElements" in window) { 4 | customElements.define(tagName || "live-filter", LiveFilter); 5 | } 6 | } 7 | 8 | connectedCallback() { 9 | this.input.addEventListener("input", (event) => 10 | this.handleInput(event.target) 11 | ); 12 | } 13 | 14 | handleInput = (input) => { 15 | const value = this.formatString(input.value); 16 | 17 | this.items.forEach((item) => { 18 | if (!value.length) { 19 | item.removeAttribute("data-live-filter-match"); 20 | return; 21 | } 22 | 23 | if (!this.formatString(item.textContent).includes(value)) { 24 | item.setAttribute("data-live-filter-match", false); 25 | } else { 26 | item.setAttribute("data-live-filter-match", true); 27 | } 28 | }); 29 | }; 30 | 31 | formatString(string) { 32 | return this.case === "insensitive" ? string.toLowerCase() : string; 33 | } 34 | 35 | get input() { 36 | return this.querySelector("input"); 37 | } 38 | 39 | get items() { 40 | return this.querySelectorAll(this.selector); 41 | } 42 | 43 | get selector() { 44 | return this.getAttribute("selector") || "li"; 45 | } 46 | 47 | get case() { 48 | return this.getAttribute("case"); 49 | } 50 | } 51 | 52 | LiveFilter.register(); 53 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@daviddarnes/live-filter", 3 | "version": "1.1.0", 4 | "description": "A Web Component for filtering items using a text input", 5 | "main": "live-filter.js", 6 | "scripts": { 7 | "start": "npx http-server ." 8 | }, 9 | "repository": { 10 | "type": "git", 11 | "url": "git+https://github.com/daviddarnes/live-filter.git" 12 | }, 13 | "keywords": [ 14 | "web", 15 | "component", 16 | "components", 17 | "web components", 18 | "custom elements" 19 | ], 20 | "license": "MIT", 21 | "publishConfig": { 22 | "access": "public" 23 | }, 24 | "bugs": { 25 | "url": "https://github.com/daviddarnes/live-filter/issues" 26 | }, 27 | "author": { 28 | "name": "David Darnes", 29 | "email": "me@daviddarnes.com", 30 | "url": "https://darn.es/" 31 | }, 32 | "homepage": "https://github.com/daviddarnes/live-filter#readme" 33 | } 34 | --------------------------------------------------------------------------------