# 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.
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>
octopalm.js
file in your project.<script src="https://github.com/eddiegulay/octopalm/raw/main/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="https://github.com/eddiegulay/octopalm/raw/main/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 properties itemName
(string) and link
(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.