Visualforce：将隐藏的输入传递给控制器​​变量

Question

我正在尝试使用jQuery自动完成功能将值传递给我的控制器。自动完成似乎不适用于apex：inputField所以我被迫使用html输入。问题是我似乎无法在输入中正确获取值。

自动完成功能正常运行，将填充值测试值，测试2

我有一个字符串变量隐藏 {get;在我的控制器中设置;}我想通过Id apiName 抓取输入中输入的内容并将其保存在名为隐藏

的控制器变量中

<apex:page standardController="Object__c" extensions="ctrl">

    <script src="https://code.jquery.com/jquery-1.8.2.js"></script>
    <script src="https://code.jquery.com/ui/1.9.0/jquery-ui.js"></script>
    <link rel="stylesheet" href="https://code.jquery.com/ui/1.9.1/themes/base/jquery-ui.css"/>
    <script type="text/javascript">
        //Create a new variable j$ just to avoid any conflicts with other libraries which may be using $.
        var j$ = jQuery.noConflict();
        //Capture the list of countries in a Array.
        var myVar = ['test value','Test 2'];
        //on Document ready
        j$(document).ready(function(){
            j$("#apiName").autocomplete({
                source : myVar
            });
        });
    </script> 

     <script type="text/javascript">
      function setHidden() {
        var hiddenRep = document.getElementById('theHiddenInput');
        hiddenRep.value = document.getElementById('apiName').value;
      }
    </script>

  <apex:form >
      <apex:pageBlock >
          <apex:pageBlockButtons location="top">
              <apex:commandButton value="Save" action="{!save}" onclick="setHidden();"/>
          </apex:pageBlockButtons>

          <apex:pageblockSection >    
                <input id="apiName"/>
                <apex:inputHidden value="{!hiddenValue}" id="theHiddenInput"/>
          </apex:pageblockSection> 

      </apex:pageBlock>
  </apex:form>
</apex:page>

Answer 1

要在JavaScript中引用Visualforce组件，必须为该组件的id属性指定值。 DOM ID由组件的id属性和包含该元素的所有组件的id属性的组合构成。

您可以通过两种方式工作：

1）Visualforce页面中的每个组件都有自己的Id属性。呈现页面时，此属性用于生成文档对象模型（DOM）ID。在JavaScript中使用$ Component.Path.to.Id来引用页面上的特定组件，其中Path.to.Id是被引用组件的组件层次结构说明符。

function setHidden() {
        var hiddenRep = document.getElementById('{!$Component.theHiddenInput}');
        hiddenRep.value = document.getElementById('apiName').value;
      }

2）通过jquery包含选择器。

function setHidden() {
   j$('[Id*='theHiddenInput']').first().val( document.getElementById('apiName').value)
}

Answer 2

我已经解决了这个问题。最终有效的是

function setHidden() {
       j$("[id*='theHiddenInput']").val(j$("[id*='apiName']").val());
}