# Member Search Debugging Guide

## Issue Fixed: Dropdown Not Showing

The problem was that the JavaScript was trying to set up event listeners before the modal elements existed in the DOM. I've implemented several fixes:

### **Root Cause**
- JavaScript was running on `DOMContentLoaded` but the modal elements don't exist until the modal is shown
- Event listeners were being attached to non-existent elements

### **Solutions Implemented**

#### 1. **Modal-Based Setup**
```javascript
$('#addMemberModal').on('shown.bs.modal', function () {
    // Setup search functionality when modal is shown
    setupAddMemberSearch();
});
```

#### 2. **Proper Function Organization**
- Moved member data to global scope
- Created separate `setupAddMemberSearch()` function
- Created separate `handleAddMemberSearch()` function

#### 3. **Added Debugging**
- Console logging to track what's happening
- Error checking for missing elements
- Fallback mechanism

#### 4. **Fallback Mechanism**
```javascript
// Fallback: Try to setup search if modal is already visible
setTimeout(function() {
    const searchInput = document.getElementById('memberSearchInput');
    if (searchInput && searchInput.offsetParent !== null) {
        console.log('Modal appears to be visible, setting up search...');
        setupAddMemberSearch();
    }
}, 1000);
```

## How to Test

### **Step 1: Open Browser Developer Tools**
1. Press F12 or right-click → Inspect
2. Go to Console tab

### **Step 2: Open Add Member Modal**
1. Click "Add Member" button
2. Look for console messages:
   - "Setting up add member search..."
   - "Available members: [array of members]"
   - "Elements found, setting up search..."

### **Step 3: Test Search**
1. Type in the search box (e.g., "irk")
2. Look for console messages:
   - "Search term: irk"
   - "Filtered members: [filtered array]"
   - "Results div displayed"

### **Step 4: Check for Errors**
If you see any of these errors, let me know:
- "memberSearchInput element not found"
- "memberSearchResults element not found"
- Any JavaScript errors

## Expected Behavior

### **When Working Correctly:**
1. **Modal Opens**: Console shows setup messages
2. **Type Search**: Console shows search term and filtered results
3. **Dropdown Appears**: Results show below search box
4. **Click Result**: Member gets selected, dropdown disappears
5. **Submit Enabled**: "Add Member" button becomes enabled

### **Visual Indicators:**
- Search box gets focus automatically
- Results appear in bordered box below search
- Selected member shows in green alert box
- Submit button changes from disabled to enabled

## Troubleshooting

### **If Dropdown Still Doesn't Show:**

#### **Check Console Messages**
```javascript
// Should see these messages:
"Setting up add member search..."
"Available members: [array]"
"Elements found, setting up search..."
```

#### **Check Member Data**
The `addMemberModalMembers` array should contain members like:
```javascript
[
  {id: 123, name: "John Smith"},
  {id: 456, name: "Jane Doe"},
  // etc...
]
```

#### **Check Element IDs**
Make sure these elements exist:
- `memberSearchInput` (search box)
- `memberSearchResults` (dropdown container)
- `selectedMemberId` (hidden input)
- `selectedMemberDisplay` (selected member display)

### **If Console Shows Errors:**

#### **"memberSearchInput element not found"**
- Modal HTML might not be loaded
- Element ID might be wrong
- Modal might not be properly initialized

#### **"Available members: []"**
- No members found in database
- SQL query might be failing
- EventId might be missing or invalid

#### **"Elements found, setting up search..." but no search works**
- Event listener not properly attached
- JavaScript errors preventing execution
- CSS might be hiding the dropdown

## Quick Fixes

### **If Nothing Works:**
1. **Refresh the page** and try again
2. **Clear browser cache** (Ctrl+F5)
3. **Check for JavaScript errors** in console
4. **Verify EventId** is present in URL

### **If Search Works But No Results:**
1. **Check database** - are there members in the group?
2. **Check SQL query** - is the groupNumber correct?
3. **Check member names** - do they contain the search term?

## Testing Checklist

- [ ] Modal opens without errors
- [ ] Search box gets focus automatically
- [ ] Console shows setup messages
- [ ] Typing shows console search messages
- [ ] Dropdown appears with results
- [ ] Clicking result selects member
- [ ] Selected member shows in green box
- [ ] Submit button becomes enabled
- [ ] Form submits successfully

## Next Steps

If the issue persists after these fixes:

1. **Share console output** - Copy/paste any error messages
2. **Check member data** - Verify the PHP query returns members
3. **Test in different browser** - Rule out browser-specific issues
4. **Check network tab** - Ensure all resources load properly

The implementation should now work correctly with proper timing and error handling.