Справочник участников: выпадающий список с поиском

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>

internal/lkgateway/web/templates/admin_manual.html

@@ -38,8 +38,10 @@
   .mf-pos{display:block;width:100%;text-align:left;padding:7px 10px;margin:3px 0;border-radius:8px;border:1px solid var(--border);background:var(--card);color:var(--text);cursor:pointer;font-size:13px}
   .mf-pos:hover:not([disabled]){border-color:var(--accent)}.mf-pos[disabled]{opacity:.5;cursor:not-allowed}
   .hb-box{position:relative}
-  .hb-res{margin-top:4px;max-height:300px;overflow:auto;border-radius:8px}
+  .hb-res{margin-top:4px;max-height:320px;overflow:auto;border-radius:8px;border:1px solid var(--border);background:var(--card-2);padding:4px}
   .hb-res:empty{display:none}
+  .hb-wrap{display:flex;gap:6px}.hb-wrap input{flex:1}
+  .hb-toggle{padding:0 12px;border-radius:8px;border:1px solid var(--border);background:var(--card);color:var(--text);cursor:pointer}
   .hb-hit{display:block;width:100%;text-align:left;padding:7px 10px;margin:2px 0;border-radius:8px;border:1px solid var(--border);background:var(--card);color:var(--text);cursor:pointer;font-size:13px}
   .hb-hit:hover{border-color:var(--accent)}
   .hb-m{color:var(--muted);font-size:12px}
@@ -339,7 +341,7 @@ function mfRerun(){const f=document.getElementById('mf');if(f&&f.closest('detail
   <div class="mf-h">4. Принимающая сторона</div>
   <div class="mf-grid">
     <div class="wide"><label>Найти в справочнике участников M2M</label>
-      <input id="hbq" placeholder="ИНН, часть названия или код участника" autocomplete="off">
+      <div class="hb-wrap"><input id="hbq" placeholder="Выберите из списка или введите ИНН, название, код" autocomplete="off"><button type="button" class="hb-toggle" title="Весь список">▾</button></div>
       <div id="hbres" class="hb-res"></div>
       {{if not .Handbook}}<span class="mf-note">Справочник участников ещё не получен от НРД — введите ИНН вручную.</span>{{end}}</div>
     <div><label class="mf-req">ИНН принимающего депозитария</label><input name="recv_inn" id="recv_inn" value="{{.O.RecvINN}}" maxlength="10" inputmode="numeric"></div>
@@ -393,21 +395,32 @@ let mfPos=[];
 function mfSec(k){const p=mfPos[k];document.getElementById('f_isin').value=p.isin;document.getElementById('f_sname').value=p.name;const q=document.getElementById('f_qty');q.placeholder='доступно '+p.qty;q.focus()}
 // hbFind — подбор участника справочника НРД по ИНН, названию или коду (без учёта регистра и кавычек).
 function hbNorm(s){return String(s||'').toLowerCase().replace(/ё/g,'е').replace(/[«»"'“”.,()]/g,' ').replace(/\s+/g,' ').trim()}
-function hbFind(list,q){q=hbNorm(q);if(q.length<2)return[];const words=q.split(' ');
+function hbFind(list,q){q=hbNorm(q);
+  if(!q)return list.slice().sort((a,b)=>(a.kind===b.kind?0:a.kind==='depo'?-1:1)||hbNorm(a.name).localeCompare(hbNorm(b.name),'ru'));
+  const words=q.split(' ');
   return list.map(p=>{const hay=hbNorm([p.inn,p.code,p.name,p.full_name,p.display_name,p.eng_name].join(' '));
     if(!words.every(w=>hay.includes(w)))return null;
     const score=(String(p.inn).startsWith(q)||String(p.code).toLowerCase().startsWith(q)?0:hbNorm(p.name).startsWith(q)||hbNorm(p.display_name).startsWith(q)?1:2)+(p.kind==='depo'?0:0.5);
-    return {p,score}}).filter(Boolean).sort((a,b)=>a.score-b.score).slice(0,12).map(x=>x.p)}
+    return {p,score}}).filter(Boolean).sort((a,b)=>a.score-b.score||hbNorm(a.p.name).localeCompare(hbNorm(b.p.name),'ru')).map(x=>x.p)}
 function hbBind(inp,box,list,onPick){
   const esc=s=>String(s??'').replace(/[&<>"]/g,c=>({'&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;'}[c]));
-  let hits=[];
-  const draw=()=>{hits=hbFind(list,inp.value);box.innerHTML=inp.value.trim().length<2?'':(hits.length?hits.map((p,i)=>'<button type="button" class="hb-hit" data-i="'+i+'"><b>'+esc(p.name)+'</b> <span class="hb-m">ИНН '+esc(p.inn)+' · '+esc(p.code)+(p.kind==='broker'?' · брокер':'')+'</span></button>').join(''):'<div class="hb-m" style="padding:6px 2px">В справочнике не найдено — введите ИНН и наименование в поля ниже.</div>')};
-  inp.addEventListener('input',draw);
-  inp.addEventListener('keydown',e=>{if(e.key==='Enter'){e.preventDefault();if(hits[0]){onPick(hits[0]);box.innerHTML=''}}if(e.key==='Escape')box.innerHTML=''});
-  box.addEventListener('click',e=>{const b=e.target.closest('.hb-hit');if(!b)return;onPick(hits[+b.dataset.i]);box.innerHTML=''});
+  let hits=[],picked=inp.dataset.picked==='1';
+  const q=()=>picked?'':inp.value;
+  const draw=()=>{hits=hbFind(list,q());box.innerHTML=(hits.length?'<div class="hb-m" style="padding:2px 4px">'+(q().trim()?'Найдено: ':'Все участники: ')+hits.length+'</div>'+hits.map((p,i)=>'<button type="button" class="hb-hit" data-i="'+i+'"><b>'+esc(p.name)+'</b> <span class="hb-m">ИНН '+esc(p.inn)+' · '+esc(p.code)+(p.kind==='broker'?' · брокер':'')+'</span></button>').join(''):'<div class="hb-m" style="padding:6px 2px">В справочнике не найдено — введите ИНН и наименование в поля ниже.</div>');box.classList.add('open')};
+  const close=()=>{box.innerHTML='';box.classList.remove('open')};
+  inp.addEventListener('focus',()=>{if(picked)inp.select();draw()});
+  inp.addEventListener('input',()=>{picked=false;draw()});
+  inp.addEventListener('keydown',e=>{if(e.key==='Enter'){e.preventDefault();if(hits[0]){pick(hits[0])}}if(e.key==='Escape')close()});
+  const pick=p=>{onPick(p);picked=true;close()};
+  box.addEventListener('mousedown',e=>e.preventDefault());
+  box.addEventListener('click',e=>{const b=e.target.closest('.hb-hit');if(b)pick(hits[+b.dataset.i])});
+  inp.addEventListener('blur',()=>setTimeout(close,150));
+  const tg=inp.parentNode.querySelector('.hb-toggle');
+  if(tg)tg.addEventListener('click',()=>{if(box.classList.contains('open'))close();else{inp.focus();draw()}});
 }
 {
   const inp=document.getElementById('hbq');
+  {const cur=({{.Handbook}}||[]).find(p=>p.inn===document.getElementById('recv_inn').value);if(inp&&cur){inp.value=cur.name+' · ИНН '+cur.inn;inp.dataset.picked='1'}}
   if(inp)hbBind(inp,document.getElementById('hbres'),{{.Handbook}}||[],p=>{document.getElementById('recv_inn').value=p.inn;document.getElementById('recv_name').value=p.name;inp.value=p.name+' · ИНН '+p.inn})
 }
 </script>