{"id":26566447,"url":"https://github.com/gmasson/dropsearchjs","last_synced_at":"2025-03-22T18:35:09.538Z","repository":{"id":281965317,"uuid":"947036546","full_name":"gmasson/dropsearchjs","owner":"gmasson","description":"A lightweight JavaScript library that adds dynamic search functionality to any web page with minimal setup.","archived":false,"fork":false,"pushed_at":"2025-03-12T03:56:01.000Z","size":0,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-03-12T04:27:32.595Z","etag":null,"topics":["javascript","javascript-applications","javascript-library","search","search-engine","vanilla-js"],"latest_commit_sha":null,"homepage":"","language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/gmasson.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2025-03-12T03:51:57.000Z","updated_at":"2025-03-12T03:55:10.000Z","dependencies_parsed_at":"2025-03-12T04:37:38.720Z","dependency_job_id":null,"html_url":"https://github.com/gmasson/dropsearchjs","commit_stats":null,"previous_names":["gmasson/dropsearchjs"],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gmasson%2Fdropsearchjs","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gmasson%2Fdropsearchjs/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gmasson%2Fdropsearchjs/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gmasson%2Fdropsearchjs/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/gmasson","download_url":"https://codeload.github.com/gmasson/dropsearchjs/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":245003283,"owners_count":20545588,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["javascript","javascript-applications","javascript-library","search","search-engine","vanilla-js"],"created_at":"2025-03-22T18:33:29.721Z","updated_at":"2025-03-22T18:35:09.530Z","avatar_url":"https://github.com/gmasson.png","language":"HTML","funding_links":[],"categories":[],"sub_categories":[],"readme":"# DropSearchJS\n\nA lightweight JavaScript library that adds dynamic search functionality to any web page with minimal setup.\n\n## Features\n\n- **Simple Setup**: Just add HTML attributes to your elements\n- **Zero Dependencies**: Pure vanilla JavaScript, no jQuery or other libraries needed\n- **Real-time Filtering**: Updates as the user types\n- **Tag Support**: Filter by custom tags\n- **Responsive**: Works on all devices and screen sizes\n- **No Configuration**: Works out of the box\n\n## Installation\n\n### Direct Download\n\nDownload the [latest release](https://github.com/gmasson/dropsearchjs/releases) and include it in your project:\n\n```html\n\u003cscript src=\"path/to/dropsearch.min.js\"\u003e\u003c/script\u003e\n```\n\n## Quick Start\n\n1. Add the script to your HTML:\n```html\n\u003cscript src=\"path/to/dropsearch.min.js\"\u003e\u003c/script\u003e\n```\n\n2. Add the `dropsearch-input` attribute to your search input:\n```html\n\u003cinput type=\"text\" dropsearch-input=\"products\" placeholder=\"Search...\"\u003e\n```\n\n3. Add the `dropsearch` attribute to elements you want to filter:\n```html\n\u003cdiv dropsearch=\"products\"\u003eProduct One\u003c/div\u003e\n\u003cdiv dropsearch=\"products\"\u003eProduct Two\u003c/div\u003e\n\u003cdiv dropsearch=\"products\"\u003eProduct Three\u003c/div\u003e\n```\n\n4. That's it! The library initializes automatically.\n\n## Example\n\nAn example implementation is included in the `example/index.html` file. This example demonstrates:\n\n- Basic implementation with Bootstrap styling\n- Product catalog with multiple filterable items\n- Tag-based filtering for more precise searches\n- Responsive layout for all device sizes\n- \"No results found\" message that appears when no matches are found\n\nTo run the example:\n1. Open the `example/index.html` file in your browser\n2. Try typing in the search box to see real-time filtering\n3. Search for product names or tag keywords (e.g. \"headphones\", \"electronics\", \"books\")\n\n## Advanced Usage\n\n### Tag-Based Filtering\n\nAdd tags to your items for more precise filtering:\n\n```html\n\u003cdiv dropsearch=\"products\" dropsearch-tags=\"electronics,gadgets\"\u003eSmartphone\u003c/div\u003e\n\u003cdiv dropsearch=\"products\" dropsearch-tags=\"clothing,fashion\"\u003eT-Shirt\u003c/div\u003e\n```\n\n### Multiple Search Groups\n\nYou can have multiple independent search groups on the same page:\n\n```html\n\u003c!-- Products Search --\u003e\n\u003cinput type=\"text\" dropsearch-input=\"products\" placeholder=\"Search products...\"\u003e\n\u003cdiv dropsearch=\"products\"\u003eProduct One\u003c/div\u003e\n\u003cdiv dropsearch=\"products\"\u003eProduct Two\u003c/div\u003e\n\n\u003c!-- Users Search --\u003e\n\u003cinput type=\"text\" dropsearch-input=\"users\" placeholder=\"Search users...\"\u003e\n\u003cdiv dropsearch=\"users\"\u003eUser One\u003c/div\u003e\n\u003cdiv dropsearch=\"users\"\u003eUser Two\u003c/div\u003e\n```\n\n### Manually Re-initialize\n\nIf you dynamically add elements to your page, you can re-initialize the library:\n\n```javascript\nwindow.initDropSearch();\n```\n\n### Custom Styling for No Results\n\n```html\n\u003cdiv id=\"no-results\" style=\"display: none;\"\u003e\n  No results found\n\u003c/div\u003e\n\n\u003cscript\u003e\n  document.addEventListener('DOMContentLoaded', () =\u003e {\n    const searchInput = document.querySelector('[dropsearch-input=\"products\"]');\n    const items = document.querySelectorAll('[dropsearch=\"products\"]');\n    const noResults = document.getElementById('no-results');\n    \n    searchInput.addEventListener('input', () =\u003e {\n      setTimeout(() =\u003e {\n        const visibleItems = Array.from(items).filter(item =\u003e \n          item.style.display !== 'none'\n        );\n        \n        noResults.style.display = visibleItems.length === 0 ? 'block' : 'none';\n      }, 100);\n    });\n  });\n\u003c/script\u003e\n```\n\n## API Reference\n\n### HTML Attributes\n\n| Attribute | Description | Example |\n|-----------|-------------|---------|\n| `dropsearch-input=\"id\"` | Add to input elements to create a search field | `\u003cinput dropsearch-input=\"products\"\u003e` |\n| `dropsearch=\"id\"` | Add to elements that should be filtered | `\u003cdiv dropsearch=\"products\"\u003eItem\u003c/div\u003e` |\n| `dropsearch-tags=\"tag1,tag2\"` | Add comma-separated tags for additional filtering | `\u003cdiv dropsearch=\"products\" dropsearch-tags=\"clothing,red\"\u003eRed Shirt\u003c/div\u003e` |\n\n### JavaScript Methods\n\n| Method | Description |\n|--------|-------------|\n| `window.initDropSearch()` | Re-initializes the library (use after dynamically adding elements) |\n\n## Browser Support\n\nDropSearchJS works in all modern browsers:\n\n- Chrome (latest)\n- Firefox (latest)\n- Safari (latest)\n- Edge (latest)\n- Opera (latest)\n- Chrome for Android (latest)\n- Safari iOS (latest)\n\n## Performance\n\nDropSearchJS is designed to be extremely lightweight and performant:\n\n- No external dependencies\n- Uses efficient DOM selectors\n- Minimal reflows and repaints\n\n## Customization\n\n### Custom Matching Algorithm\n\nIf you need to customize how matches are determined, you can extend the library:\n\n```javascript\n// Save the original prototype method\nconst originalFilterItems = DropSearch.prototype.filterItems;\n\n// Override with custom logic\nDropSearch.prototype.filterItems = function(searchId, query) {\n  // Your custom implementation here\n  // or call the original with custom behavior\n  originalFilterItems.call(this, searchId, query);\n}\n```\n\n## Building From Source\n\nDownload the source code and use your preferred method to minify the JavaScript file for production use.\n\n## Contributing\n\nContributions are welcome. Please submit a Pull Request.\n\n1. Fork the repository\n2. Create your feature branch (`git checkout -b feature/feature-name`)\n3. Commit your changes (`git commit -m 'Add feature'`)\n4. Push to the branch (`git push origin feature/feature-name`)\n5. Open a Pull Request\n\n## License\n\nThis project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgmasson%2Fdropsearchjs","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fgmasson%2Fdropsearchjs","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgmasson%2Fdropsearchjs/lists"}