Update app.py

app.py

@@ -427,6 +427,19 @@ HTML_TEMPLATE = """
         
         .form-section label { font-size: 11px; text-transform: uppercase; color: var(--text-secondary); font-weight: 600; margin-bottom: 6px; display: block; }
         
+        /* CUSTOM DROPDOWN UI */
+        .input-wrapper { position: relative; width: 100%; }
+        .input-arrow { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); pointer-events: none; color: var(--text-secondary); font-size: 10px; }
+        .custom-dd {
+            position: absolute; top: 100%; left: 0; right: 0; background: var(--bg-panel); border: 1px solid var(--border);
+            border-radius: 6px; max-height: 200px; overflow-y: auto; z-index: 1000; display: none;
+            box-shadow: 0 4px 12px rgba(0,0,0,0.5); margin-top: 4px;
+        }
+        .custom-dd-opt { padding: 8px 12px; font-size: 12px; cursor: pointer; color: var(--text-primary); border-bottom: 1px solid var(--border); }
+        .custom-dd-opt:last-child { border-bottom: none; }
+        .custom-dd-opt:hover { background: var(--bg-input); color: var(--accent); }
+        .custom-dd-group { padding: 6px 12px; font-size: 10px; font-weight: 700; color: var(--text-secondary); background: var(--bg-body); text-transform: uppercase; }
+
         /* SERIES ROW STRUCTURE (POLISHED UI) */
         .series-row { 
             background: var(--bg-panel); padding: 12px; border-radius: 8px; border: 1px solid var(--border); margin-bottom: 10px; 
@@ -528,13 +541,19 @@ HTML_TEMPLATE = """
                     <div style="display:grid; grid-template-columns:1fr 1fr; gap:12px;">
                         <div class="form-section">
                             <label>Symbol</label>
-                            <input type="text" id="cfgRoot" list="listRoots" onchange="Config.onRootChange()" oninput="this.value=this.value.toUpperCase();" style="width:100%" placeholder="Type or select...">
-                            <datalist id="listRoots"></datalist>
+                            <div class="input-wrapper">
+                                <input type="text" id="cfgRoot" onfocus="CustomDD.open('cfgRoot')" oninput="CustomDD.filter('cfgRoot')" style="width:100%; text-transform: uppercase;" placeholder="Type or select..." autocomplete="off">
+                                <div class="input-arrow">▼</div>
+                                <div id="dd-cfgRoot" class="custom-dd"></div>
+                            </div>
                         </div>
                         <div class="form-section">
                             <label>Expiry</label>
-                            <input type="text" id="cfgExp" list="listExps" onchange="Config.onExpChange()" style="width:100%" placeholder="Type or select...">
-                            <datalist id="listExps"></datalist>
+                            <div class="input-wrapper">
+                                <input type="text" id="cfgExp" onfocus="CustomDD.open('cfgExp')" oninput="CustomDD.filter('cfgExp')" style="width:100%; text-transform: uppercase;" placeholder="Type or select..." autocomplete="off">
+                                <div class="input-arrow">▼</div>
+                                <div id="dd-cfgExp" class="custom-dd"></div>
+                            </div>
                         </div>
                     </div>
                     
@@ -550,8 +569,11 @@ HTML_TEMPLATE = """
                     <div id="cfgNormalFields">
                         <div class="form-section">
                             <label>Instrument</label>
-                            <input type="text" id="cfgInst" list="listInsts" style="width:100%" placeholder="Type or select...">
-                            <datalist id="listInsts"></datalist>
+                            <div class="input-wrapper">
+                                <input type="text" id="cfgInst" onfocus="CustomDD.open('cfgInst')" oninput="CustomDD.filter('cfgInst')" style="width:100%; text-transform: uppercase;" placeholder="Type or select..." autocomplete="off">
+                                <div class="input-arrow">▼</div>
+                                <div id="dd-cfgInst" class="custom-dd"></div>
+                            </div>
                         </div>
                     </div>
 
@@ -616,6 +638,69 @@ HTML_TEMPLATE = """
 </div>
 
 <script>
+// --- CUSTOM SEARCHABLE DROPDOWN LOGIC ---
+document.addEventListener('click', (e) => {
+    if (!e.target.closest('.input-wrapper')) {
+        document.querySelectorAll('.custom-dd').forEach(el => el.style.display = 'none');
+    }
+});
+
+const CustomDD = {
+    data: { cfgRoot: [], cfgExp: [], cfgInst:[] },
+    
+    clear(id) {
+        this.data[id] =[];
+        document.getElementById(id).value = '';
+    },
+    set(id, items, groupName = null) {
+        if (!groupName) {
+            this.data[id] = items.map(i => ({val: i, group: null}));
+        } else {
+            this.data[id].push(...items.map(i => ({val: i, group: groupName})));
+        }
+    },
+    open(id) {
+        document.querySelectorAll('.custom-dd').forEach(el => el.style.display = 'none');
+        const inp = document.getElementById(id);
+        inp.select();
+        this.render(id, ''); // Show all options
+        document.getElementById(`dd-${id}`).style.display = 'block';
+    },
+    filter(id) {
+        this.render(id, document.getElementById(id).value);
+        document.getElementById(`dd-${id}`).style.display = 'block';
+    },
+    render(id, query) {
+        const el = document.getElementById(`dd-${id}`);
+        const q = query.toLowerCase();
+        let html = '';
+        let currentGroup = null;
+        
+        const filtered = this.data[id].filter(item => item.val.toLowerCase().includes(q));
+        
+        if (filtered.length === 0) {
+            el.innerHTML = '<div class="custom-dd-opt" style="color:var(--text-secondary); cursor:default;">No matches found</div>';
+            return;
+        }
+
+        filtered.forEach(item => {
+            if (item.group && item.group !== currentGroup) {
+                html += `<div class="custom-dd-group">${item.group}</div>`;
+                currentGroup = item.group;
+            }
+            html += `<div class="custom-dd-opt" onclick="CustomDD.pick('${id}', '${item.val}')">${item.val}</div>`;
+        });
+        el.innerHTML = html;
+    },
+    pick(id, val) {
+        document.getElementById(id).value = val;
+        document.getElementById(`dd-${id}`).style.display = 'none';
+        if(id === 'cfgRoot') Config.onRootChange();
+        if(id === 'cfgExp') Config.onExpChange();
+    }
+};
+// ----------------------------------------
+
 const App = {
     state: { date: null, mode: 'LIVE', columns: 3, layout: [[],[],[]], charts: {}, refreshRate: 15 },
     presets: {
@@ -1061,10 +1146,10 @@ const Config = {
 
         this.updatePresetsDropdown();
 
-        const rList = document.getElementById('listRoots');
+        CustomDD.clear('cfgRoot');
         const res = await fetch(`/api/roots?date=${App.state.date}`);
         const roots = await res.json();
-        rList.innerHTML = roots.map(r=>`<option value="${r}"></option>`).join('');
+        CustomDD.set('cfgRoot', roots);
 
         const cfg = App.state.charts[id].config;
         document.getElementById('cfgTF').value = cfg.timeframe || '1min';
@@ -1118,8 +1203,8 @@ const Config = {
 
     async onRootChange(preExp, preInst) {
         const root = document.getElementById('cfgRoot').value.toUpperCase();
-        const eList = document.getElementById('listExps');
-        eList.innerHTML = '';
+        CustomDD.clear('cfgExp');
+        CustomDD.clear('cfgInst');
         
         if (!preExp) document.getElementById('cfgExp').value = '';
         if (!preInst) document.getElementById('cfgInst').value = '';
@@ -1128,14 +1213,13 @@ const Config = {
 
         const res = await fetch(`/api/expiries?date=${App.state.date}&root=${root}`);
         const exps = await res.json();
-        eList.innerHTML = exps.map(e=>`<option value="${e}"></option>`).join('');
+        CustomDD.set('cfgExp', exps);
         
         if(preExp && exps.includes(preExp)) { 
             document.getElementById('cfgExp').value = preExp; 
             await this.onExpChange(preInst); 
         }
         else if (exps.length > 0) {
-            // Auto-select logic
             const auto = await fetch(`/api/auto_config?date=${App.state.date}&root=${root}`).then(r=>r.json());
             if(auto.current) { 
                 document.getElementById('cfgExp').value = auto.current.expiry; 
@@ -1146,20 +1230,17 @@ const Config = {
 
     async onExpChange(preInst) {
         const root = document.getElementById('cfgRoot').value.toUpperCase();
-        const exp = document.getElementById('cfgExp').value;
-        const iList = document.getElementById('listInsts');
-        iList.innerHTML = '';
+        const exp = document.getElementById('cfgExp').value.toUpperCase();
+        CustomDD.clear('cfgInst');
         
         if (!root || !exp) return;
 
         const res = await fetch(`/api/instruments?date=${App.state.date}&root=${root}&expiry=${exp}`);
         const data = await res.json();
         
-        let html = '';
-        data.spot_fut.forEach(i => html += `<option value="${i}"></option>`);
-        data.options.forEach(i => html += `<option value="${i}"></option>`);
+        if (data.spot_fut.length > 0) CustomDD.set('cfgInst', data.spot_fut, 'Futures & Equity');
+        if (data.options.length > 0) CustomDD.set('cfgInst', data.options, 'Options');
         
-        iList.innerHTML = html;
         if(preInst) document.getElementById('cfgInst').value = preInst;
     },
 
@@ -1246,8 +1327,8 @@ const Config = {
         } 
         else {
             const root = document.getElementById('cfgRoot').value.toUpperCase();
-            const exp = document.getElementById('cfgExp').value;
-            const inst = document.getElementById('cfgInst').value;
+            const exp = document.getElementById('cfgExp').value.toUpperCase();
+            const inst = document.getElementById('cfgInst').value.toUpperCase();
             
             if(!root || !exp) return alert("Incomplete Details. Please type or select valid options.");