# Search Functionality

This guide explains how the search functionality works on your website and how to customize it.

## Overview

The search functionality allows visitors to search through your blog posts by title, category, and content preview. It consists of:

1. A search box in the navigation bar
2. A dropdown with search results
3. A dedicated search results page for viewing all results

## How It Works

1. When a user types in the search box, JavaScript filters the posts from `posts.json` in real-time
2. The top 5 matching results are displayed in a dropdown
3. If there are more than 5 results, a "View all results" link appears
4. Clicking this link takes the user to a dedicated search results page

## Files Involved

- **HTML**:
  - Search box in `index.html` and other pages
  - Full search results page in `search-results.html`

- **JavaScript**:
  - `scripts/search.js`: Handles the search box functionality
  - `scripts/search-results.js`: Handles the search results page

- **CSS**:
  - Search styles in `styles/components.css`

## Customizing the Search

### Changing the Number of Results in Dropdown

To change the number of results shown in the dropdown (default is 5):

1. Open `scripts/search.js`
2. Find this line: `results.slice(0, 5).forEach(post => {`
3. Change the number `5` to your desired number

### Changing Search Fields

By default, the search looks through post titles, categories, and previews. To change what fields are searched:

1. Open `scripts/search.js` and `scripts/search-results.js`
2. Find the filter function in both files:
   ```javascript
   const filteredPosts = allPosts.filter(post => {
       return (
           post.title.toLowerCase().includes(query) ||
           post.category.toLowerCase().includes(query) ||
           post.preview.toLowerCase().includes(query)
       );
   });
   ```
3. Add or remove fields as needed

### Styling the Search Box

To customize the appearance of the search box:

1. Open `styles/components.css`
2. Find the "Search Components" section
3. Modify the CSS properties as desired

### Styling the Search Results

To customize the appearance of search results:

1. Open `styles/components.css`
2. Find the "Search Results Page" section
3. Modify the CSS properties as desired

## Adding Search to New Pages

To add the search box to a new page:

1. Include the search box HTML in your page:
   ```html
   <div id="search-container">
     <div class="search-box">
       <input type="text" id="search-input" placeholder="Search...">
       <button id="search-button" aria-label="Search">
         <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
           <circle cx="11" cy="11" r="8"></circle>
           <line x1="21" y1="21" x2="16.65" y2="16.65"></line>
         </svg>
       </button>
     </div>
     <div id="search-results"></div>
   </div>
   ```

2. Include the search script:
   ```html
   <script src="/scripts/search.js" defer></script>
   ```

## Troubleshooting

### Search Not Working

If the search functionality isn't working:

1. Check the browser console for JavaScript errors
2. Verify that `posts.json` is properly formatted
3. Ensure all required scripts are included on the page

### Search Results Not Displaying Correctly

If search results don't display correctly:

1. Check that the CSS is properly loaded
2. Verify the HTML structure matches what the JavaScript expects
3. Check that the post objects in `posts.json` have all the required fields

## Advanced Customization

For more advanced customization:

1. **Fuzzy Search**: Implement a fuzzy search algorithm for more forgiving searches
2. **Search Highlighting**: Highlight the search terms in the results
3. **Search Filters**: Add filters to narrow down results by category, date, etc.

These advanced features would require additional JavaScript code and are not included in the basic implementation.