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.
- 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.
You can use OctoPalm.js in two ways:
Include the following CDN link in your document <head>:
<script src="https://aidalog.github.io/cdn/light/octopalm.js"></script>- Download the latest version from the OctoPalm GitHub Repository.
- Include the
octopalm.jsfile in your project.
<script src="/path/to/octopalm.js"></script>Add an input element where users will type their search queries. For example:
<input type="text" id="search-input" placeholder="Search..." />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>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.
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).
const items = [
{ itemName: "Example Item", link: "/example-item" }
];
new OctoPalm('search-input', items);OctoPalm.js is open-source and available for any use.
Well, it's open for all :)
For any questions or issues, please open an issue on the GitHub repository.