https://github.com/gmasson/dropsearchjs
A lightweight JavaScript library that adds dynamic search functionality to any web page with minimal setup.
https://github.com/gmasson/dropsearchjs
javascript javascript-applications javascript-library search search-engine vanilla-js
Last synced: about 1 year ago
JSON representation
A lightweight JavaScript library that adds dynamic search functionality to any web page with minimal setup.
- Host: GitHub
- URL: https://github.com/gmasson/dropsearchjs
- Owner: gmasson
- License: mit
- Created: 2025-03-12T03:51:57.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2025-03-12T03:56:01.000Z (over 1 year ago)
- Last Synced: 2025-03-12T04:27:32.595Z (over 1 year ago)
- Topics: javascript, javascript-applications, javascript-library, search, search-engine, vanilla-js
- Language: HTML
- Homepage:
- Size: 0 Bytes
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# DropSearchJS
A lightweight JavaScript library that adds dynamic search functionality to any web page with minimal setup.
## Features
- **Simple Setup**: Just add HTML attributes to your elements
- **Zero Dependencies**: Pure vanilla JavaScript, no jQuery or other libraries needed
- **Real-time Filtering**: Updates as the user types
- **Tag Support**: Filter by custom tags
- **Responsive**: Works on all devices and screen sizes
- **No Configuration**: Works out of the box
## Installation
### Direct Download
Download the [latest release](https://github.com/gmasson/dropsearchjs/releases) and include it in your project:
```html
```
## Quick Start
1. Add the script to your HTML:
```html
```
2. Add the `dropsearch-input` attribute to your search input:
```html
```
3. Add the `dropsearch` attribute to elements you want to filter:
```html
Product One
Product Two
Product Three
```
4. That's it! The library initializes automatically.
## Example
An example implementation is included in the `example/index.html` file. This example demonstrates:
- Basic implementation with Bootstrap styling
- Product catalog with multiple filterable items
- Tag-based filtering for more precise searches
- Responsive layout for all device sizes
- "No results found" message that appears when no matches are found
To run the example:
1. Open the `example/index.html` file in your browser
2. Try typing in the search box to see real-time filtering
3. Search for product names or tag keywords (e.g. "headphones", "electronics", "books")
## Advanced Usage
### Tag-Based Filtering
Add tags to your items for more precise filtering:
```html
Smartphone
T-Shirt
```
### Multiple Search Groups
You can have multiple independent search groups on the same page:
```html
Product One
Product Two
User One
User Two
```
### Manually Re-initialize
If you dynamically add elements to your page, you can re-initialize the library:
```javascript
window.initDropSearch();
```
### Custom Styling for No Results
```html
No results found
document.addEventListener('DOMContentLoaded', () => {
const searchInput = document.querySelector('[dropsearch-input="products"]');
const items = document.querySelectorAll('[dropsearch="products"]');
const noResults = document.getElementById('no-results');
searchInput.addEventListener('input', () => {
setTimeout(() => {
const visibleItems = Array.from(items).filter(item =>
item.style.display !== 'none'
);
noResults.style.display = visibleItems.length === 0 ? 'block' : 'none';
}, 100);
});
});
```
## API Reference
### HTML Attributes
| Attribute | Description | Example |
|-----------|-------------|---------|
| `dropsearch-input="id"` | Add to input elements to create a search field | `` |
| `dropsearch="id"` | Add to elements that should be filtered | `
Item` |
| `dropsearch-tags="tag1,tag2"` | Add comma-separated tags for additional filtering | `Red Shirt` |
### JavaScript Methods
| Method | Description |
|--------|-------------|
| `window.initDropSearch()` | Re-initializes the library (use after dynamically adding elements) |
## Browser Support
DropSearchJS works in all modern browsers:
- Chrome (latest)
- Firefox (latest)
- Safari (latest)
- Edge (latest)
- Opera (latest)
- Chrome for Android (latest)
- Safari iOS (latest)
## Performance
DropSearchJS is designed to be extremely lightweight and performant:
- No external dependencies
- Uses efficient DOM selectors
- Minimal reflows and repaints
## Customization
### Custom Matching Algorithm
If you need to customize how matches are determined, you can extend the library:
```javascript
// Save the original prototype method
const originalFilterItems = DropSearch.prototype.filterItems;
// Override with custom logic
DropSearch.prototype.filterItems = function(searchId, query) {
// Your custom implementation here
// or call the original with custom behavior
originalFilterItems.call(this, searchId, query);
}
```
## Building From Source
Download the source code and use your preferred method to minify the JavaScript file for production use.
## Contributing
Contributions are welcome. Please submit a Pull Request.
1. Fork the repository
2. Create your feature branch (`git checkout -b feature/feature-name`)
3. Commit your changes (`git commit -m 'Add feature'`)
4. Push to the branch (`git push origin feature/feature-name`)
5. Open a Pull Request
## License
This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.