2

I am attempting to use jQuery autocomplete to pass values to my controller. Autocomplete doesn't seem to work with apex:inputField so I am forced to use an html input. The problem is I can't seem to be able to properly get the value inside the input.

The auto complete is working and will populate with values test value,Test 2

I have a string variable hidden {get; set;} in my controller. I want to grab whatever is entered in the input with Id apiName and save that in my controller variable called hidden

<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>
2

Visualforce creates a special hierarchy of Ids to ensure a unique Id for every element (take a look via the Chrom Dev Console to see what I mean - so getElementbyId doesn't usually work.

If you are already using jQuery, I would use that to do what you need e.g.

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.