eddiegulay / octopalm

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.
https://aidalog.github.io/cdn/light/octopalm.js
MIT License
36 stars 0 forks source link

Not working #1

Open lr19-boy opened 1 month ago

lr19-boy commented 1 month ago

When I type the keywords, the dropdown is not popping up....

eddiegulay commented 1 month ago

The input need to have pre defined styling or else search results will show up at the bottom of the document.

check this example

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Real-Time Search</title>

    <!-- Define styling for your elements  -->
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
        }

        .search-container {
            position: relative;
            width: 300px;
            margin: 50px auto;
        }

        #search-input {
            width: 100%;
            padding: 8px;
            box-sizing: border-box;
        }
    </style>
</head>

<body>
    <div class="search-container">
        <input type="text" id="search-input" placeholder="Search..." />
    </div>

    <!-- Add this CDN -->
    <script src="https://aidalog.github.io/cdn/light/octopalm.js"></script>
    <script>

        // define your target search items and target urls
        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>
</body>

</html>

Try this out to check if your issue persist.

It will be cool if you make a fork and try to make it work even without pre-defined styling for the input search input 😎