jQuery 依單選按鈕動態建立自動完成實例：完整實作範例

需求：根據「機場出發」/「到達機場」單選按鈕切換，動態建立對應的機場自動完成輸入框實例。

HTML 結構優化

<div class="sch_item basefix">
  <span>行程類型</span>
  <label><input type="radio" name="type" value="1" checked id="airFrom">機場出發</label>
  <label><input type="radio" name="type" value="0" id="airTo">到達機場</label>
</div>

<ul class="searchbox">
  <li>
    <span>出發地</span>
    <input type="text" id="notice01" class="input_txt" autocomplete="off" />
    <div class="auto_hidden" id="autoairportdiv"></div>
  </li>
  <li>
    <span>到達地</span>
    <input type="text" id="notice02" class="input_txt" autocomplete="off" />
    <div class="auto_hidden" id="autoairportdiv1"></div>
  </li>
</ul>

jQuery 實作邏輯

$(function() {
  // 共用自動完成配置
  var airportData = [/* 機場資料陣列 */];
  
  function initAutoComplete(inputId, listId) {
    return new AutoComplete2(inputId, listId, airportData);
  }

  // 預設建立「出發」實例
  var currentAC = initAutoComplete('notice01', 'autoairportdiv');

  // 監聽單選按鈕切換
  $('input[name="type"]').on('change', function() {
    if (currentAC) currentAC.destroy(); // 銷毀舊實例
    
    if (this.id === 'airFrom') {
      currentAC = initAutoComplete('notice01', 'autoairportdiv');
    } else {
      currentAC = initAutoComplete('notice02', 'autoairportdiv1');
    }
  });
});

關鍵點說明

• 使用 .on('change') 取代內聯 onkeyup，分離行為與結構
• 實例化前先 destroy() 避免記憶體洩漏
• 將資料陣列抽離為變數，便於維護與擴充
• 透過 this.id 判斷當前選項，邏輯清晰

此模式可輕鬆擴展至多條件動態表單場景。