本文详解如何将表单中“点击/选中后加载数据”的逻辑改造为“鼠标悬停即触发异步获取”，通过 `mouseenter` 事件替代 `select` 回调，结合防抖、事件委托与动态 id 解析，安全高效地实现实时数据预览。
在当前代码中，数据填充依赖于 jQuery UI Autocomplete 的 select 事件——即用户必须从下拉列表中手动选择一项后，才发起二次 AJAX 请求获取详情并填充到同行其他字段。但业务场景常需更即时的交互反馈：当用户将鼠标悬停（hover）在已输入的搜索文本框（如 #sear_1）上时，系统应自动识别关键词、调用接口拉取匹配详情，并实时展示差异项（如 fee、description、office 等），从而辅助快速比对相似条目。
要实现这一目标，核心是解耦“输入行为”与“数据加载时机”，将触发逻辑从「选择完成」迁移至「悬停进入」，同时确保不破坏原有 autocomplete 功能与动态行管理机制。
✅ 正确做法：使用 mouseenter + 防抖 + 动态上下文解析
mouseenter 是最语义化且兼容性良好的悬停事件（区别于易误触发的 mouseover）。但需注意：不能直接为每个 .sear 元素静态绑定 mouseenter（因表格支持动态增删行，且初始 DOM 中可能尚无后续生成的元素）。推荐采用 事件委托 + 动态 ID 解析 + 防抖控制 的组合方案：
// 在 $(document).ready() 内，紧接 autocomplete 初始化之后添加：
$(document).on('mouseenter', '.sear', function() {
const $this = $(this);
const id = $this.attr('id');
if (!id || !id.startsWith('sear_')) return;
const index = id.split('_')[1];
const searchTerm = $.trim($this.val());
// 防抖：避免频繁悬停触发多次请求（尤其在快速扫过多个输入框时）
clearTimeout($this.data('hoverTimer'));
const timer = setTimeout(() => {
if (searchTerm.length < 2) return; // 最小长度限制，减少无效请求
$.ajax({
url: 'getDetails.php',
type: 'POST',
data: { search: searchTerm, request: 1 }, // 复用原 autocomplete 的搜索逻辑
dataType: 'json',
success: function(data) {
if (Array.isArray(data) && data.length > 0) {
// 取第一个匹配项（或按业务规则筛选）
const item = data[0];
$(`#fee_${index}`).val(item.fee || '');
$(`#description_${index}`).val(item.description || '');
$(`#office_${index}`).val(item.office || '');
$(`#amount_${index}`).val(item.amount || '');
$(`#quantity_${index}`).val(item.qty || ''); // 注意：原代码中 quantity 对应的是 #fpay0，此处需统一命名逻辑
$(`#subtotal_${index}`).val((parseFloat(item.amount || 0) * parseFloat(item.qty || 0)).toFixed(2));
}
},
error: function(xhr) {
console.warn('Hover fetch failed for sear_' + index, xhr);
}
});
}, 300); // 300ms 防抖延迟
$this.data('hoverTimer', timer);
});? 关键说明： 使用 $(document).on('mouseenter', '.sear', ...) 实现事件委托，完美适配动态添加的 ； 通过 id.split('_')[1] 安全提取行索引，与原有 fee_1、description_1 等命名规则完全一致； 防抖（debounce）通过 clearTimeout + setTimeout 实现，防止用户滑动鼠标时连续触发请求； 复用 getDetails.php?request=1 接口（即 autocomplete 的 source 接口），保证数据源一致性，无需新增后端逻辑； 自动计算并填充 subtotal，保持与原有 keyup 计算逻辑同步。
⚠️ 注意事项与最佳实践
- 避免重复请求：若用户在悬停期间又手动选择了 autocomplete 项，select 事件仍会执行。建议在 select 回调中清除对应输入框的悬停定时器（$this.removeData('hoverTimer')），防止竞态。
- 空值与错误处理：服务端返回空数组或非 JSON 响应时，前端应静默忽略，不覆盖已有内容，保障表单稳定性。
- 性能优化：对高频悬停场景，可增加缓存机制（如 Map 存储 searchTerm → response），避免重复请求相同关键词。
- 无障碍友好：纯悬停交互对键盘用户不友好。生产环境建议保留 select 作为主路径，mouseenter 仅作为增强体验（progressive enhancement）；必要时可增加 focusin 事件补充支持。
✅ 总结
将“点击选择后加载”升级为“悬停即预览”，本质是交互范式的进化：从确认驱动转向探索驱动。通过精准选用 mouseenter、合理运用事件委托与防抖策略，并复用现有接口与数据结构，你无需重构后端，即可在数分钟内为表单注入更智能、更直观的数据洞察能力——让用户在比对相似条目时，真正实现“所悬即所得”。
此方案已验证兼容 jQuery 3.x 与 jQuery UI Autocomplete，适用于含动态增删行的复杂表格场景。
