the shares should be displayed in a list from which they can be selected.

index.html

@@ -53,11 +53,19 @@
                                     <option value="dax">DAX</option>
                                 </select>
                             </div>
-                            <label class="block text-sm font-medium text-gray-700 mb-1">Stock Symbol</label>
-                            <div class="relative">
-                                <input id="stockSearch" type="text" placeholder="Search stocks..." 
-                                       class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent">
-                                <div id="stockDropdown" class="hidden absolute z-10 mt-1 w-full bg-white shadow-lg rounded-md max-h-60 overflow-auto"></div>
+                            <label class="block text-sm font-medium text-gray-700 mb-1">Stock Selection</label>
+                            <div id="stockList" class="border border-gray-300 rounded-md max-h-60 overflow-y-auto p-2">
+                                <div class="grid grid-cols-1 gap-2">
+                                    <template id="stockItemTemplate">
+                                        <div class="flex items-center p-2 hover:bg-gray-50 rounded cursor-pointer">
+                                            <input type="radio" name="selectedStock" class="mr-2">
+                                            <div>
+                                                <div class="font-medium text-gray-800 stock-symbol"></div>
+                                                <div class="text-xs text-gray-500 stock-name"></div>
+                                            </div>
+                                        </div>
+                                    </template>
+                                </div>
                             </div>
 </div>
                         
@@ -295,46 +303,33 @@
             stockSearch.value = '';
             stockSearch.dispatchEvent(new Event('input'));
         });
-
-        // Stock search functionality
-        document.getElementById('stockSearch').addEventListener('input', function() {
+        // Populate stock list
+        function populateStockList() {
             const market = document.getElementById('marketSelect').value;
-            const query = this.value.toLowerCase();
-            const dropdown = document.getElementById('stockDropdown');
+            const stockList = document.getElementById('stockList');
+            const template = document.getElementById('stockItemTemplate');
+            const container = stockList.querySelector('.grid');
             
-            if (query.length < 1) {
-                dropdown.classList.add('hidden');
-                return;
-            }
-
-            const filteredStocks = stockData[market].filter(stock => 
-                stock.symbol.toLowerCase().includes(query) || 
-                stock.name.toLowerCase().includes(query)
-            );
-
-            if (filteredStocks.length === 0) {
-                dropdown.innerHTML = '<div class="p-2 text-gray-500">No stocks found</div>';
-                dropdown.classList.remove('hidden');
-                return;
-            }
-
-            dropdown.innerHTML = filteredStocks.map(stock => `
-                <div class="p-2 hover:bg-gray-100 cursor-pointer" 
-                     onclick="document.getElementById('stockSearch').value='${stock.symbol}'; this.parentNode.classList.add('hidden')">
-                    <div class="font-medium">${stock.symbol}</div>
-                    <div class="text-xs text-gray-500">${stock.name}</div>
-                </div>
-            `).join('');
+            container.innerHTML = '';
+            
+            stockData[market].forEach(stock => {
+                const clone = template.content.cloneNode(true);
+                const radio = clone.querySelector('input[type="radio"]');
+                radio.value = stock.symbol;
+                radio.id = `stock-${stock.symbol}`;
+                
+                clone.querySelector('.stock-symbol').textContent = stock.symbol;
+                clone.querySelector('.stock-name').textContent = stock.name;
+                
+                container.appendChild(clone);
+            });
+        }
 
-            dropdown.classList.remove('hidden');
-        });
+        // Initialize stock list
+        populateStockList();
 
-        // Hide dropdown when clicking outside
-        document.addEventListener('click', function(e) {
-            if (!e.target.closest('#stockDropdown') && e.target.id !== 'stockSearch') {
-                document.getElementById('stockDropdown').classList.add('hidden');
-            }
-        });
+        // Update stock list when market changes
+        document.getElementById('marketSelect').addEventListener('change', populateStockList);
 </script>
 </body>
 </html>