Fast Real-Time Search For Web Applications – OctoPalm.js

OctoPalm.js is a lightweight JavaScript library that adds real-time, interactive search functionality to your webpage.

The library processes search queries instantly and presents results with smooth animations, similar to autocomplete/autosuggest. It supports emojis, custom links, and works across modern web browsers.

OctoPalm.js can be useful for e-commerce sites, blogs, and online directories where users need quick content access. An online store can implement the library to allow customers instant product searches. A blog can use real-time search to help readers find articles by topic. A directory site can enable users to find listings quickly with keywords.

How to use it:

1. Download the OctoPalm.js package and include it on your HTML page.

<script src="/path/to/octopalm.ladybug.js"></script>

2. Create an input field where users will type their search queries. This field needs a unique ID so the script can identify it.

<input type="text" id="example" placeholder="Search..." />

3. Create an array of items that you want to make searchable. Each item should be an object containing at least one search key and a link. You can include the following properties in each item:

• itemName: The name of the item to display (e.g., “Laptop”).
• label: An alternative label for the item (e.g., “Notebook Computer”).
• emoji: An emoji to display alongside the item (e.g., “💻”).
• link: The URL to redirect the user when they click the search result.

const items = [
      { label: "Phone Case", link: "/phone-case", emoji: "📱" },
      { label: "Charger", link: "/charger", emoji: "🔌" },
      { label: "Tablet", link: "/devices/tablet" },
      { label: "Smart Watch", link: "smart-watch", emoji: "⌚" }
      // ...
];

4. Initialize OctoPalm with the input ID and items.

new OctoPalm('example', items);

5. Override the default CSS styles directly within octopalm.ladybug.js or modify them in your own stylesheet.

.opalm-search-results {
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  border: 1px solid #ccc;
  background: #fff;
  max-height: 320px;
  overflow-y: auto;
  z-index: 1000;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  border-radius: 5px;
  transition: opacity 0.3s ease, transform 0.3s ease;
  opacity: 0;
  transform: scaleY(0);
  transform-origin: top;
  scrollbar-width: thin;
  scrollbar-color: #000 #fff;
}
.opalm-search-results.show {
  opacity: 1;
  transform: scaleY(1);
}
.opalm-search-result-item {
  padding: 12px 16px;
  border-bottom: 1px solid #eee;
  display: flex;
  align-items: center;
  transition: background-color 0.3s ease, transform 0.3s ease;
  cursor: pointer;
}
.opalm-search-result-item:hover {
  background-color: #f0f0f0;
  transform: translateX(5px);
}
.opalm-search-result-item a {
  text-decoration: none;
  color: #333;
  font-weight: 600;
}
.opalm-search-result-item a:hover {
  text-decoration: underline;
}
.opalm-search-results::-webkit-scrollbar {
  width: 8px;
}
.opalm-search-results::-webkit-scrollbar-track {
  background: #fff;
}
.opalm-search-results::-webkit-scrollbar-thumb {
  background: #333;
  border-radius: 10px;
}
.opalm-search-results::-webkit-scrollbar-thumb:hover {
  background: #000;
}