DWR + JavaScript 實現輸入框自動補全：從原理到完整示例

DWR (Direct Web Remoting) 讓 JavaScript 直接調用 Java 後端方法，是早期 AJAX 開發的經典方案。本文梳理 DWR 實現輸入框自動補全的核心流程，提供完整前後端代碼結構，並給出現代替代方案建議。

核心架構

瀏覽器 (JS)          DWR Servlet          Java 後端
   │                     │                   │
   ├─ keyup 事件 ──────►│                   │
   │                     ├─ 反序列化參數 ───►│
   │                     │  調用 Java 方法  │
   │                     │  查詢數據庫      │
   │                     │◄─ 返回 List│
   │                     ├─ 序列化 JSON ───►│
   │◄─ 回調函數接收數據──┤                   │
   │  更新 DOM (下拉列表)                   │

後端 Java 類

// AutoCompleteService.java
public class AutoCompleteService {
    public List getSuggestions(String prefix) {
        // 實際應連接數據庫，此處模擬
        List all = Arrays.asList("地球", "地球村", "地球儀", "地道", "地鐵");
        return all.stream()
                  .filter(s -> s.startsWith(prefix))
                  .collect(Collectors.toList());
    }
}

DWR 配置

<!-- dwr.xml -->
<dwr>
  <allow>
    <create creator="new" javascript="AutoComplete">
      <param name="class" value="com.example.AutoCompleteService"/>
    </create>
  </allow>
</dwr>

前端頁面

<html>
<head>
  <script type="text/javascript" src="/dwr/interface/AutoComplete.js"></script>
  <script type="text/javascript" src="/dwr/engine.js"></script>
  <script>
    function showSuggestions() {
      var input = document.getElementById("searchBox").value;
      if (input.length < 1) { hideDiv(); return; }
      // 調用後端，回調函數接收 List
      AutoComplete.getSuggestions(input, function(data) {
        var div = document.getElementById("suggestions");
        div.innerHTML = "";
        data.forEach(function(item) {
          var line = document.createElement("div");
          line.innerHTML = item;
          line.onclick = function() {
            document.getElementById("searchBox").value = item;
            hideDiv();
          };
          div.appendChild(line);
        });
        div.style.display = "block";
      });
    }
    function hideDiv() {
      document.getElementById("suggestions").style.display = "none";
    }
  </script>
</head>
<body>
  <input type="text" id="searchBox" onkeyup="showSuggestions()" />
  <div id="suggestions" style="display:none; border:1px solid #ccc; position:absolute; background:white;"></div>
</body>
</html>

關鍵細節

1. 防抖：onkeyup 直接請求會產生大量無效請求，生產環境必加 setTimeout 防抖（如 300ms）。
2. 安全：DWR 默認暴露所有公共方法，生產環境需配置 <include method="getSuggestions"/> 白名單，防止任意方法調用。
3. 編碼：確保頁面、JS、Java、數據庫統一 UTF-8，避免中文亂碼。

現代替代方案建議

DWR 早已停止維護（最後更新 2015 年）。新項目建議採用：

• Spring Boot + REST API + fetch/axios：標準化、生態豐富、易維護。
• GraphQL：按需查詢，減少過度獲取。
• 成熟 UI 組件庫：Element Plus (Vue), Ant Design (React), Select2 (jQuery) 內置自動補全，無需手寫。

參考資源

原文教程：DWR 實現自動補全完整示例