+ Start a Discussion

from html input inside component to controller

I have component:

<apex:component >
	<apex:includeScript value="{!URLFOR($Resource.AutoCompleteJQuery, 'AutoCompleteJQuery/jquery-1.8.1.min.js')}" />
	<apex:includeScript value="{!URLFOR($Resource.AutoCompleteJQuery, 'AutoCompleteJQuery/jquery-ui-1.8.23.custom.min.js')}" />
	<link rel="stylesheet" type="text/css"
		href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/themes/smoothness/jquery-ui.css" />

	<!-- Attributes Required for Component -->
	<apex:attribute name="datalist" description="JSON String. the script below turns this intoan auto complete list/type suggest list." type="String" required="true" />

	$(function() {

		var availableTags = new Array();
		availableTags = {!datalist};
		$( "#tags" ).autocomplete({
			source: availableTags


<div class="demo">

<div class="ui-widget">
	<label for="tags">Tags: </label>
	<input id="tags" />



The input with id="tags" is an autocomplete, drop down list.

I need to get the value from that input into my controller.


I tried using what was mentioned in the forums:




I have not been able to get either method working.


Here is my current page testing the component:

<apex:page controller="AutoCompleteData">
    function setCurrent(){
    	var currentValue = document.getElementById('tags').value;

       <c:AutoCompleteComponent datalist="{!JSONString}"/>
		<apex:form >
			<apex:inputHidden value="{!currentValue}" id="inptHdn"/>
			<apex:commandButton onclick="setCurrent();" action="{!log}"></apex:commandButton>


 And here is the log function in the controller:

public PageReference log(){
	System.debug('Log method: '+currentValue);
	return null;

 The autocomplete list shows up properly, I just cannot get it back into my controller.

Any ideas?


If you are recommending the inputHidden or actionFunction, please show a good example, please.



Best Answer chosen by Admin (Salesforce Developers) 

I am finally able to get the component value into my controller.



public static String log(String item){
	System.debug('Log method: '+item);
	return 'hello';

 Javascript in the Visualforce page:

 function setCurrent(){
    	var currentValue = document.getElementById('tags').value;
    	function(result, event){
    	{escape: true}


Here is the component implementation:

<c:AutoCompleteComponent datalist="{!JSONString}"/>
		<button type="button" onclick="setCurrent();">Click Me!</button>