OctoPalm.js
OctoPalm.js is a lightweight JavaScript library designed to add real-time, customizable search functionality to your web applications. It provides a seamless search experience with animated results and custom-styled scrollbars, making it a robust solution for enhancing search features on your site.
🥳 v2.0.0 Ladybug
Features
- Real-Time Search: Instant search results as users type, providing a seamless user experience.
- Customizable Styles: Easy to modify the look and feel of search results with built-in CSS or custom styles.
- Animated Results: Smooth animations for search result transitions, making the interface more engaging.
- Emoji Support: Add emojis to items for a more visually appealing and interactive search experience.
- Duplicate Removal: Automatically filters out duplicate results, ensuring a cleaner search.
- Cross-Browser Compatibility: Works seamlessly across all modern browsers (Chrome, Firefox, Safari, Edge, etc.).
-
Key-Based Searching: Allows searching across multiple keys of each item (e.g.,
itemName,label,emoji).
Installation
You can add OctoPalm.js to your project using one of two methods:
1. Via CDN
Add the following CDN link to the <head> of your HTML:
<script src="https://aidalog.github.io/cdn/light/octopalm.ladybug.js"></script>
2. Download from GitHub
- Download the latest version from the OctoPalm GitHub Repository.
- Include the
octopalm.ladybug.jsfile in your project:
<script src="/path/to/octopalm.ladybug.js"></script>
Usage
1. HTML Setup
Create an input field where users can type their search queries:
<input type="text" id="search-input" placeholder="Search..." />
2. Initialize OctoPalm.js
Add the following script to initialize the search functionality:
<script src="/path/to/octopalm.ladybug.js"></script>
<script>
// Example items for a shopping site
const items = [
{ label: "Car Cover", link: "/accessories/car-cover", emoji: "🚔" },
{ label: "Helmet", link: "/accessories/helmet", emoji: "🪖" },
{ name: "Bike", link: "/vehicles/bike" },
{ label: "Scooter", link: "/vehicles/scooter", emoji: "🛵" },
// Add more items as needed...
];
// Initialize OctoPalm with the input ID and items
new OctoPalm('search-input', items);
</script>
3. Customizing Styles
The library injects default styles for search results. You can modify these styles by updating the CSS in octopalm.js or by overriding them in your own stylesheet:
.opalm-search-results {
background-color: #f4f4f4;
font-family: Arial, sans-serif;
border: 1px solid #ddd;
}
API
Constructor
new OctoPalm(inputId, items)
-
inputId: The ID of the input element where users will type their search queries. -
items: An array of items to search through. Each item should be an object containing at least one search key (e.g.,itemName,label,emoji) and a correspondinglink.
Example
const items = [
{ itemName: "Example Item", link: "/example-item" },
{ label: "Car Cover", link: "/accessories/car-cover", emoji: "🚔" }
];
new OctoPalm('search-input', items);
Key Search Properties
Each item in the items array can have one or more of the following properties:
-
itemName: The name of the item to be displayed (e.g.,"Toyota Camry"). -
label: Another possible label for the item (e.g.,"Car Cover"). -
emoji: An emoji that will be displayed alongside the item's label. -
link: A URL where the user will be redirected when they click the search result.
Examples
Here’s an example of a simple shopping search implementation:
<input type="text" id="search-input" placeholder="Search products..." />
<script>
const items = [
{ label: "Car Cover", link: "/accessories/car-cover", emoji: "🚔" },
{ label: "Helmet", link: "/accessories/helmet", emoji: "🪖" },
{ name: "Scooter", link: "/vehicles/scooter", emoji: "🛵" },
// Add more items...
];
new OctoPalm('search-input', items);
</script>
Support
For any questions or issues, please open an issue on the GitHub repository.
OctoPalm.js was created and is maintained by Eddie Gulay. Thank you for using this library, and feel free to contribute or share your feedback! Your support helps make this project better.
Top comments (4)
Can you connect it with a backend, so it uses data from a database to search?
Not really, there is a work around for that. If you can pull the data from your backend and format it in this format
Then you are good to go. But in real sense it should be able to load data dynamically from different sources.
It will be cool if you can create a fork and customize it more 😎. It'd be great if the library become more robust.
Yeah that would be cool, integrating it with postgres shouldn't be that hard, the problem is that every developer likes another framework better, so you'll end up with 1001 plugins...