使用 JSON 實作 TextBox 下拉選擇與自由輸入雙模式

前端實作

頁面放置隱藏 <div id="pubDiv"> 作為下拉選單容器。JavaScript 讀取伺服端產生的 JSON 物件 strJson，根據下拉選單選擇的部門動態建立選項表格。

var strJson = <%=BuildJson() %>; // 注意：不可加引號或分號
function ShowBdzDiv() {
    var dept = document.getElementById("<%=ddlDeptEdit.ClientID %>").value;
    var strHtml = "<table>";
    for (var key in strJson[dept]) strHtml += "<tr><td onclick=SetBdz()>" + key + "</td></tr>";
    strHtml += "</table>";
    var oDiv = document.getElementById("pubDiv");
    oDiv.innerHTML = strHtml;
    oDiv.style.display = "block";
    // 定位顯示座標...
}
function SetBdz() {
    document.getElementById("<%=txtBdz.ClientID %>").value = event.srcElement.innerText;
    HiddenDiv();
}

TextBox 設定 AutoCompleteType="Disabled" 並綁定 onfocus="ShowBdzDiv()"。此實作僅支援滑鼠點選，不支援鍵盤操作。