jQuery Autocomplete 限制顯示條數：客戶端 CSS 滾動或服務端分頁返回

Autocomplete 下拉選項過多影響體驗。兩種限制方案：

1. 客戶端數據 + CSS 固定高度滾動

.ui-autocomplete {
    max-height: 200px;
    overflow-y: auto;
    overflow-x: hidden;
}

• 適用於數據量較小（<500 條）全量加載場景
• 無需改動後端，前端即時過濾

2. 服務端分頁返回

// 後端
@GetMapping("/suggest")
public List suggest(@RequestParam String term, @RequestParam(defaultValue="10") int limit) {
    return repo.findTopByNameStartingWith(term, PageRequest.of(0, limit));
}

// 前端
$('#input').autocomplete({
    source: function(request, response) {
        $.getJSON('/suggest', {term: request.term, limit: 10}, response);
    }
});

• 適用於大數據量、模糊匹配需數據庫索引支撐
• 減少網絡傳輸與前端渲染壓力

選型建議

靜態字典/標籤 → 客戶端 CSS；動態業務數據/用戶搜索 → 服務端分頁。