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.
Features
- Real-Time Search: Provides instant search results as users type in the search input.
- Customizable Styling: Easily customizable styles to fit your design.
- Animated Results: Smooth animations for search result appearance and item interactions.
- Cross-Browser Support: Compatible with modern browsers including Chrome, Firefox, and Safari.
Installation
You can use OctoPalm.js in two ways:
Via CDN
Include the following CDN link in your document <head>:
<script src="https://aidalog.github.io/cdn/light/octopalm.js"></script>
Download from GitHub
- Download the latest version from the OctoPalm GitHub Repository.
- Include the
octopalm.jsfile in your project.
<script src="/path/to/octopalm.js"></script>
Usage
1. Preparing Your HTML
Add an input element where users will type their search queries. For example:
<input type="text" id="search-input" placeholder="Search..." />
2. Initializing OctoPalm.js
Include the OctoPalm.js script in your HTML and initialize it with your input ID and search items. Here's how:
<script src="/path/to/octopalm.js"></script>
<script>
// Example search items for a auto shop
const items = [
{ itemName: "Toyota Camry", link: "/vehicles/toyota-camry" },
{ itemName: "Honda Civic", link: "/vehicles/honda-civic" },
{ itemName: "Ford F-150", link: "/vehicles/ford-f150" },
{ itemName: "Chevrolet Silverado", link: "/vehicles/chevrolet-silverado" },
{ itemName: "Brake Pads", link: "/parts/brake-pads" },
];
// Initialize OctoPalm with the search input ID and items
new OctoPalm('search-input', items);
</script>
3. Customizing Styles
OctoPalm.js injects default styles into your document. However, you can customize these styles by modifying the CSS in octopalm.js or overriding them in your own stylesheet.
API
Constructor
new OctoPalm(inputId, items)
-
inputId: The ID of the input element where users will type their search queries. -
items: An array of search items, each with the propertiesitemName(string) andlink(string).
Example
const items = [
{ itemName: "Example Item", link: "/example-item" }
];
new OctoPalm('search-input', items);
Support
For any questions or issues, please open an issue on the GitHub repository.
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...