feat: Replace input fields with CommunityAutocompleteInput in ASNs, Domains, and IPRanges managers for enhanced user experience and streamlined community selection

frontend/src/ASNsNewManager.jsx

@@ -1,5 +1,6 @@
 import { useState, useEffect, useRef } from 'react';
 import axios from 'axios';
+import CommunityAutocompleteInput from './components/CommunityAutocompleteInput.jsx';
 import { 
   IconPlus, 
   IconSearch, 
@@ -286,13 +287,12 @@ function ASNsNewManager() {
                 </div>
                 <div className="mb-3">
                   <label className="form-label">Community</label>
-                  <input
-                    list="community-options"
-                    type="text"
-                    className={`form-control${newInvalid.community ? ' is-invalid' : ''}`}
-                    placeholder="112"
+                  <CommunityAutocompleteInput
                     value={newItem.community}
-                    onChange={(e) => setNewItem({ ...newItem, community: e.target.value })}
+                    onChange={(v) => setNewItem({ ...newItem, community: v })}
+                    communities={communities}
+                    placeholder="Начните вводить номер или имя"
+                    className={`form-control${newInvalid.community ? ' is-invalid' : ''}`}
                   />
                   {newInvalid.community && <div className="invalid-feedback">Только цифры</div>}
                   {(() => {
@@ -439,15 +439,11 @@ function ASNsNewManager() {
                       <td className="text-end">
                         {editingAsn === item.asn ? (
                           <>
-                            <input
-                              list="community-options"
-                              type="text"
-                              className={`form-control d-inline-block w-auto me-2${isValidCommunity(editingValue) ? '' : ' is-invalid'}`}
+                            <CommunityAutocompleteInput
                               value={editingValue}
-                              ref={editInputRef}
-                              onChange={e => setEditingValue(e.target.value)}
-                              onKeyDown={e => handleEditKeyDown(e, item.asn)}
-                              style={{maxWidth: 120}}
+                              onChange={setEditingValue}
+                              communities={communities}
+                              className={`form-control d-inline-block w-auto me-2${isValidCommunity(editingValue) ? '' : ' is-invalid'}`}
                             />
                             <button className="btn btn-success btn-icon me-1" onClick={() => handleSaveEdit(item.asn)} disabled={!isValidCommunity(editingValue)}><IconCheck size={18} /></button>
                             <button className="btn btn-secondary btn-icon" onClick={handleCancelEdit}><IconX size={18} /></button>
@@ -553,15 +549,7 @@ function ASNsNewManager() {
           </div>
         </div>
       )}
-      {/* Общий список подсказок community */}
-      <datalist id="community-options">
-        {communities.map(c => {
-          const label = c.name ? `${c.value} - ${c.name}` : `${c.value}`;
-          return (
-            <option key={c.value} value={c.value} label={label}>{label}</option>
-          );
-        })}
-      </datalist>
+      {/* datalist больше не нужен, т.к. используем кастомный автокомплит */}
     </>
   );
 }