Skip to content

Releases: eddiegulay/octopalm

ladybug

21 Nov 19:31
@eddiegulay eddiegulay
ladybug
f9b9ad8
Compare
Choose a tag to compare
ladybug Latest
Latest

OctoPalm.js v2.0.0 - Ladybug

Release Date: 21 November 2024

What's New in v2.0.0 - Ladybug:

Image description

  • Real-Time, Customizable Search: Improved search functionality with real-time results as users type, offering a smoother, faster user experience.
  • Animated Results: Enhanced animations for smoother search result display and item interactions.
  • Emoji Support: Added the ability to display emojis next to item names for a more engaging and visually appealing search experience.
  • Duplicate Item Removal: Automatically removes duplicate items from the results to ensure that each item is displayed only once.
  • Improved Scrollbars: Custom scrollbar styling for a more polished design.
  • Better Item Filtering: Items are now organized by key, improving performance and efficiency when filtering results.

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.ladybug.js"></script>

Download from GitHub

  1. Download the latest version from the [OctoPalm GitHub Repository](https://github.com/eddiegulay/octopalm).
  2. Include the octopalm.js file in your project:
<script src="/path/to/octopalm.ladybug.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 store
    const items = [
        { itemName: "Toyota Camry", link: "/vehicles/toyota-camry", emoji: "🚗" },
        { itemName: "Honda Civic", link: "/vehicles/honda-civic"},
        // Add more items as needed...
    ];

    // 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 properties itemName (string), link (string), and optional emoji (string).

Credits

OctoPalm.js was created and is maintained by [Eddie Gulay](https://github.com/eddiegulay). For support or contributions, please visit the [GitHub repository](https://github.com/eddiegulay/octopalm).

Assets 3
Loading