页面双Autocomplete组件异常：选中项均添加至同一表格

单个Autocomplete组件长期正常运行，新增第二个组件后，两个组件选中的条目都会被添加至同一个表格；调换两个组件的顺序后，问题依旧。

相关代码 #

JavaScript 代码 #

$(document).ready(function() {

  $("#assistantInstructorAutoCompleteList").tablesorter({
    widthFixed: true,
    widgets: ["zebra"],
    headers: {
      1: {
        sorter: false
      }
    }
  });
  $("#orgallowedAutoCompleteList").tablesorter({
    widthFixed: true,
    widgets: ["zebra"],
    headers: {
      1: {
        sorter: false
      }
    }
  });

  $("#assistantInstructor").autoCompleteList({
    source: "/training/load/course_ins_ALL_lookup.asp",
    appendTo: "#assistantInstructors",
    //      itemName: "assistantInstructors",
    headers: [{
      name: "Assistant or Trainee Instructors",
      size: 90
    }, {
      name: ""
    }, ],
    noResultsMessage: "No Results Found. Users registered for this course cannot be added as instructors."
  });

  $("#orgallowed").autoCompleteList({
    source: "/training/load/OrgLookup.asp",
    appendTo: "#allowedOrganizations",
    //         itemName: "allowedOrganizations",
    headers: [{
      name: "Organizations Allowed To Register",
      size: 90
    }, {
      name: ""
    }, ],
    noResultsMessage: "No Results Found. "
  });

});

HTML/ASP 代码 #

<div id="orgsallowedSection">
  <hr class="grid_12" style="width: 950px;" />
  <h6 class="grid_12">Organizations Allowed to Register</h6>
  <div class="grid_12">
    <input tabindex="15" type="text" id="orgallowed" name="orgallowed" value="" style="width: 400px;" class="" placeholder="Begin typing in organization name to select">

    <table id="orgallowedAutoCompleteList" class="tablesorter">
      <thead>
        <tr>
          <th style="width: 90%">Organizations Allowed To Register</th>
          <th style="width: 10%;">&nbsp;</th>
        </tr>
      </thead>
      <tbody>
        <% Do While NOT RSAOrgs.EOF  %>
          <tr>
            <td>
              <input id="allowedOrganizations" name="allowedOrganizations" value="<%= RSAOrgs("org_id")%>" type="hidden">
              <%= RSAOrgs("org_nm") %>
            </td>
            <td style="text-align: center;">
              <a href="remove_allowed_org.asp?coid=<%=courseOfferingId%>&oid=<%=RSAOrgs("org_id")%>&keepThis=true&TB_iframe=true&height=110&width=450" class="thickbox" title="Remove Allowed Organization">
                <img src="/images/close.gif"></a>
            </td>
          </tr>
          <%  RSAOrgs.MoveNext
                Loop    
            %>
      </tbody>
    </table>
  </div>

  <div id="instructionSection">
    <hr class="grid_12" style="width: 950px;" />
    <div class="grid_2" style="width: 70px;">
      <h6>Instructors</h6>
    </div>

    <div class="grid_12" style="margin-bottom: 10px;">
      <input tabindex="16" type="text" id="assistantInstructor" name="assistantInstructor" value="" style="width: 400px;" class="" placeholder="Begin typing assistant or trainee instructor’s name to select" />

      <table id="assistantInstructorAutoCompleteList" class="tablesorter">
        <thead>
          <tr>
            <th style="width: 90%">Assistant or Trainee Instructors</th>
            <th style="width: 10%;">&nbsp;</th>
          </tr>
        </thead>
        <tbody>
          <%Do While (Not AIR.EOF) %>
            <tr>
              <td>
                <input id="assistantInstructors" name="assistantInstructors" value="<%= AIR("user_id")%>" type="hidden">
                <% Response.write AIR("last_nm") & ", " & AIR("first_nm") %>
              </td>
            </tr>
            <%  
              AIR.MoveNext
            Loop    
            %>
        </tbody>
      </table>
    </div>
  </div>
</div>

问题原因分析 #

• appendTo目标错误：两个Autocomplete组件的appendTo配置指向了隐藏输入框的ID，而非对应表格的tbody容器，组件无法正确识别目标表格，导致条目追加混乱。
• 重复ID违反HTML规范：服务器循环输出的隐藏输入框使用了相同的ID（allowedOrganizations和assistantInstructors），DOM选择器无法精准定位，进一步加剧了条目追加的混乱。
• 缺失itemName配置：注释掉的itemName参数用于区分不同组件的表单提交字段，缺失后组件无法正确关联各自的表单数据，导致逻辑混淆。

修复方案 #

1. 修正appendTo指向目标 #

将组件的appendTo改为对应表格的tbody元素，确保条目追加到正确位置，同时取消itemName注释并改为数组形式：

$("#assistantInstructor").autoCompleteList({
  // 其他配置不变
  appendTo: "#assistantInstructorAutoCompleteList tbody",
  itemName: "assistantInstructors[]"
});

$("#orgallowed").autoCompleteList({
  // 其他配置不变
  appendTo: "#orgallowedAutoCompleteList tbody",
  itemName: "allowedOrganizations[]"
});

2. 修复重复ID问题 #

将循环输出的隐藏输入框ID改为唯一值，同时将name属性设为数组形式，方便后端接收多个值：

组织部分ASP代码修改：

<% 
Dim orgIndex : orgIndex = 0
Do While NOT RSAOrgs.EOF  
%>
<tr>
  <td>
    <input id="allowedOrganizations_<%=orgIndex%>" name="allowedOrganizations[]" value="<%= RSAOrgs("org_id")%>" type="hidden">
    <%= RSAOrgs("org_nm") %>
  </td>
  <td style="text-align: center;">
    <a href="remove_allowed_org.asp?coid=<%=courseOfferingId%>&oid=<%=RSAOrgs("org_id")%>&keepThis=true&TB_iframe=true&height=110&width=450" class="thickbox" title="Remove Allowed Organization">
      <img src="/images/close.gif"></a>
  </td>
</tr>
<%  
  RSAOrgs.MoveNext
  orgIndex = orgIndex + 1
Loop    
%>

讲师部分ASP代码修改：

<% 
Dim instructorIndex : instructorIndex = 0
Do While (Not AIR.EOF) 
%>
<tr>
  <td>
    <input id="assistantInstructors_<%=instructorIndex%>" name="assistantInstructors[]" value="<%= AIR("user_id")%>" type="hidden">
    <%= AIR("last_nm") & ", " & AIR("first_nm") %>
  </td>
  <td style="text-align: center;">
    <a href="remove_assistant_instructor.asp?coid=<%=courseOfferingId%>&uid=<%=AIR("user_id")%>&keepThis=true&TB_iframe=true&height=110&width=450" class="thickbox" title="Remove Assistant Instructor">
      <img src="/images/close.gif"></a>
  </td>
</tr>
<%  
  AIR.MoveNext
  instructorIndex = instructorIndex + 1
Loop    
%>

3. 确保表格结构完整性 #

补充讲师表格的删除按钮列，保持与组织表格结构一致，避免组件渲染时出现布局问题。

内容的提问来源于stack exchange，提问作者Brian Platz