Wikipedia Instant Search using Alpine JS

This is a simple search engine that uses Alpine JS to provide a real-time dropdown of search results as the user types in their query. It fetches data from Wikipedia's public API and displays the results in a dropdown list. The user can navigate through the list using the arrow keys and select a result by pressing enter to open the article.

Features

• Instant Search: Results appear as you type.
• Keyboard Navigation: Use Up/Down arrows to navigate, Enter to select, and Escape to clear.
• Theme Switcher: Toggle between multiple themes (Oceanic, Dracula, Light, Monokai, Nord).
• Responsive Design: Built with Bootstrap and custom CSS.

Getting Started

To use this search engine, you need to include the following dependencies (already included in index.html):

• Alpine JS
• Bootstrap CSS and JS
• Custom assets/style.css, assets/search.js, and assets/theme.js

Usage

To use this search engine, you need to create an HTML container with the x-data="dropdownSearch()" attribute. This initializes the Alpine JS component.

<div class="search-shell" x-data="dropdownSearch()">
    <!-- Input field -->
    <input type="text"
           x-model="query"
           x-on:click.outside="reset()"
           x-on:keydown.escape.prevent="reset()"
           x-on:keydown.arrow-down.prevent="selectNext()"
           x-on:keydown.arrow-up.prevent="selectPrevious()"
           x-on:keydown.enter.prevent="goUrl()"
           autofocus>

    <!-- Results Dropdown -->
    <div class="results-panel" x-show="query.length">
        <!-- Loop through results -->
        <template x-for="(result, index) in results">
           <!-- Result Item -->
        </template>
    </div>
</div>

Configuration

The search logic is located in assets/search.js. You can modify the data_search function to change api parameters or the data source.

Customization

You can customize the look and feel by modifying assets/style.css or adding new themes in assets/theme.js.