Notes

The `script.js` file contains JavaScript code for handling user interactions on a web page designed for address lookup and property type selection. Here's an analysis of the code with comments for clarification:

```javascript
// Wait until the DOM is fully loaded before running the script
document.addEventListener('DOMContentLoaded', function() {
// Grabbing necessary DOM elements for later use
const addressInput = document.getElementById('addressInput');
const suggestionsContainer = document.getElementById('suggestionsContainer');
const propertyTypeSelect = document.getElementById('propertyType');
const searchButton = document.getElementById('searchButton');
const resultContainer = document.getElementById('results');
let selectedAddressId = null; // Variable to hold the selected address ID

let timeoutId; // For debouncing the address input

// Event listener for address input
addressInput.addEventListener('input', function() {
clearTimeout(timeoutId); // Clear the previous timeout to debounce the input
const query = this.value;

if (query.length < 4) { // API requires a minimum of 4 characters
suggestionsContainer.innerHTML = '';
return;
}

// Wait for a short period before making API call to debounce the input
timeoutId = setTimeout(() => {
fetchSuggestions(query);
}, 300);
});

// Function to fetch address suggestions from the Geoscape API
async function fetchSuggestions(query) {
try {
const response = await fetch(`https://api.psma.com.au/v1/predictive/address?query=${encodeURIComponent(query)}`, {
headers: {
'Accept': 'application/json',
'Authorization': 'XeqZpzTGK6N2XW1DZLCgGsOkG5YuIVZL' // Replace with your actual API key
}
});

if (!response.ok) {
throw new Error(`Error: ${response.status}`);
}

const data = await response.json();
displaySuggestions(data.suggest);
console.log(data);
} catch (error) {
console.error('Failed to fetch suggestions:', error);
suggestionsContainer.innerHTML = 'Failed to fetch suggestions.';
}
}

// Event listener for property type selection
propertyTypeSelect.addEventListener('change', function() {
const otherOptionsContainer = document.getElementById('otherOptionsContainer');
if (this.value === 'Other') {
otherOptionsContainer.style.display = 'block'; // Show the other options
} else {
otherOptionsContainer.style.display = 'none'; // Hide the other options
}
});

// Function to display address suggestions and allow user to select one
function displaySuggestions(suggestions) {
suggestionsContainer.innerHTML = ''; // Clear previous suggestions

suggestions.forEach(suggestion => {
const div = document.createElement('div');
div.textContent = suggestion.address;
div.onclick = function() {
addressInput.value = this.textContent; // Update input field with selected suggestion
selectedAddressId = suggestion.id; // Capture the address ID from the suggestion
suggestionsContainer.innerHTML = ''; // Clear suggestions
};
suggestionsContainer.appendChild(div);
});
}

// Function to parse the user-entered address
function parseAddress(address) {
const regex = /(d+)/(d+)-(d+) (w+) (w+), (w+) (w+) (d+)/;
const match = address.match(regex);
if (match) {
return {
unit_number: match[1],
street_number_1: match[2],
street_number_2: match[3],
street_name: match[4],
street_type: match[5],
suburb: match[6],
state: match[7],
postcode: match[8]
};
} else {
return null;
}
}

// Event listener for the search button
searchButton.addEventListener('click', function(event) {
event.preventDefault();
if(!selectedAddressId) {
alert('Please select an address from suggestions');
return;
}

const addressId = document.getElementById('addressId').value;
// Redirects to details.html with the user-selected address
window.location.href = 'details.html';
});

// Additional event listener for the search button - seems redundant and may need removal
// This portion appears to be conflicting with the previous event listener
document.getElementById('searchButton').addEventListener('click', function() {
const userAddress = document.getElementById('addressInput').value;
localStorage.setItem('userAddress', userAddress); // Storing in local storage
window.location.href = 'details.html'; // Redirect to details.html
});
});
```

### Observations and Suggestions:

- The script sets up event listeners and handles user interactions for address input and property type selection.
- It fetches address suggestions from an API as the user types and displays these suggestions.
- The script appears to have multiple event listeners for the same search button, which might cause conflicts. You should consolidate these into a single event listener.
- The script is designed to redirect to `details.html` upon a successful search. However, it seems to be missing the logic to construct the API URL as per your requirement. This needs to be implemented either before the redirect or on the `details.html` page.
- The `parseAddress` function is present but not utilized in the current event listeners. You may need to integrate it properly to parse the user input and construct the API URL.

To fix the script, you should remove the redundant event listener and ensure the remaining one properly handles the address parsing and constructs the correct API URL for redirection. Additionally, ensure that `details.html` is set up to receive this data and perform the necessary API call.