UNABLE TO CLICK ENTER AFTER WRITING A CITY, DO AUTO-COMPLETION ALSO WHEN TYPING THE NAME OF THE CITY AND CORRECT THE SEARCH ISSUE SINCE IT'S NOT WORKING

index.html

@@ -131,15 +131,88 @@
 
     <script>
         feather.replace();
+        // Initialize autocomplete
+        const locationInput = document.getElementById('location-input');
+        const searchBtn = document.getElementById('search-btn');
         
-        document.getElementById('search-btn').addEventListener('click', fetchWeather);
-        document.getElementById('location-input').addEventListener('keypress', function(e) {
+        // Debounce function to limit API calls
+        function debounce(func, delay) {
+            let timeout;
+            return function() {
+                const context = this;
+                const args = arguments;
+                clearTimeout(timeout);
+                timeout = setTimeout(() => func.apply(context, args), delay);
+            };
+        }
+
+        // Fetch location suggestions
+        async function fetchSuggestions(query) {
+            if (!query || query.length < 2) return;
+            try {
+                const response = await fetch(`https://api.openweathermap.org/geo/1.0/direct?q=${query}&limit=5&appid=3fd7e0e3b5f5bf7f3a6cee1c6af5f8e0`);
+                if (!response.ok) return;
+                const data = await response.json();
+                return data;
+            } catch (error) {
+                console.error('Error fetching suggestions:', error);
+            }
+        }
+
+        // Show suggestions dropdown
+        function showSuggestions(suggestions) {
+            const dropdown = document.createElement('div');
+            dropdown.className = 'absolute z-10 w-full mt-1 bg-white rounded-md shadow-lg max-h-60 overflow-auto';
+            dropdown.id = 'suggestions-dropdown';
+            
+            suggestions.forEach(item => {
+                const suggestion = document.createElement('div');
+                suggestion.className = 'px-4 py-2 hover:bg-gray-100 cursor-pointer';
+                suggestion.textContent = `${item.name}, ${item.country}`;
+                suggestion.addEventListener('click', () => {
+                    locationInput.value = `${item.name}, ${item.country}`;
+                    dropdown.remove();
+                    fetchWeather();
+                });
+                dropdown.appendChild(suggestion);
+            });
+            
+            // Remove existing dropdown if any
+            const existing = document.getElementById('suggestions-dropdown');
+            if (existing) existing.remove();
+            
+            locationInput.parentNode.appendChild(dropdown);
+        }
+
+        // Handle input changes with debounce
+        locationInput.addEventListener('input', debounce(async (e) => {
+            const query = e.target.value.trim();
+            if (query.length >= 2) {
+                const suggestions = await fetchSuggestions(query);
+                if (suggestions && suggestions.length) {
+                    showSuggestions(suggestions);
+                }
+            }
+        }, 300));
+
+        // Handle click outside to close dropdown
+        document.addEventListener('click', (e) => {
+            if (!e.target.closest('#suggestions-dropdown') && e.target !== locationInput) {
+                const dropdown = document.getElementById('suggestions-dropdown');
+                if (dropdown) dropdown.remove();
+            }
+        });
+
+        // Handle search button and enter key
+        searchBtn.addEventListener('click', fetchWeather);
+        locationInput.addEventListener('keydown', function(e) {
             if (e.key === 'Enter') {
+                const dropdown = document.getElementById('suggestions-dropdown');
+                if (dropdown) dropdown.remove();
                 fetchWeather();
             }
         });
-
-        async function fetchWeather() {
+async function fetchWeather() {
             const location = document.getElementById('location-input').value.trim();
             if (!location) return;
 
@@ -159,8 +232,9 @@
                 if (!geoData || geoData.length === 0) {
                     throw new Error('City not found. Try a different spelling or nearby location.');
                 }
-                
-                const { lat: latitude, lon: longitude } = geoData[0];
+                const city = geoData[0];
+                const { lat: latitude, lon: longitude } = city;
+                const locationName = `${city.name}${city.state ? ', ' + city.state : ''}, ${city.country}`;
 // Fetch current weather and forecast in one call
                 // Use OpenWeatherMap API for weather data
                 const weatherResponse = await fetch(`https://api.openweathermap.org/data/2.5/onecall?lat=${latitude}&lon=${longitude}&exclude=minutely,hourly,alerts&units=metric&appid=3fd7e0e3b5f5bf7f3a6cee1c6af5f8e0`);
@@ -191,9 +265,8 @@ if (!weatherResponse.ok) throw new Error('Weather service unavailable');
         function updateCurrentWeather(data) {
             const current = data.current;
             const date = new Date(current.dt * 1000);
-            
-            document.getElementById('location').textContent = document.getElementById('location-input').value;
-            document.getElementById('date').textContent = date.toLocaleDateString('en-US', { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' });
+            document.getElementById('location').textContent = locationName;
+document.getElementById('date').textContent = date.toLocaleDateString('en-US', { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' });
             document.getElementById('temp').textContent = `${Math.round(current.temp)}°C`;
             
             const weatherDesc = current.weather[0].description;
@@ -230,8 +303,9 @@ const forecastItem = document.createElement('div');
                 forecastContainer.appendChild(forecastItem);
             }
 // Example: Load default weather for London on page load (more reliable)
+        // Load default weather for London on page load
         window.addEventListener('load', () => {
-            document.getElementById('location-input').value = 'London, UK';
+            locationInput.value = 'London, UK';
             fetchWeather();
         });
 </script>