I created my first APEX component which takes values from picklist and displays them in a autocomplete When I test my page in preview it is working fine, however, when I put the component in the page, I get an error in browser console that custom controller not found.
This is my page

<apex:page tabStyle="Case" standardController="Case" extensions="CaseReasonCompleteController">
<apex:includeScript value="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"/>
<apex:includeScript value="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"/>
<apex:stylesheet value="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css"/>

    .displayNone { 
    .displayBlock {
    .ui-autocomplete-loading { 
    background: white url(/img/loading32.gif) right center no-repeat;
    background-size:15px 15px; 
    .placeHolder {
    font-style: italic;
<apex:form id="autoCompleteCaseReason">
    <apex:pageBlock id="searchBlock">
        <apex:pageBlockSection id="searchSection" title="Case Reason Lookup" columns="1">
            <apex:outputLabel value="Case Reason"></apex:outputLabel>
            <apex:inputText id="caseReasonText" value="{!searchTerm}" styleClass="placeHolder"/>
            <apex:inputHidden id="caseReasonId" value="{!selectedReason}"/>
<script type="text/javascript">
var placeholder = 'Enter case reason here';
var caseReasonObject;
var queryTerm;

    source: function(request, response) {
        queryTerm = request.term;
        CaseReasonCompleteController.searchCaseReason(request.term, function(result, event) {
            if(event.type == 'exception') {
            } else {
                caseReasonObject = result;
    focus: function(event, ui) {
        return false;
    select: function(event, ui) {
        return false;
.data("ui-autocomplete")._renderItem = function(ul, item) {
    var entry = "<a>"+item.label;
    entry = entry + "</a>";
    entry = entry.replace(queryTerm, "<b>" + queryTerm + "</b>");
    return $("<li></li>")
    .data("ui-autocomplete-item", item )
    .append( entry )
    .appendTo( ul );
$('[id$=caseReasonText]').on("focus", function(event) {
    $tgt = $(event.target);
    if($tgt.val() === placeholder ){
$('[id$=caseReasonText]').on("blur",  function(event){
    $tgt = $(event.target);
    if($tgt.val() === '' ){
</script> </apex:page>

This is my controller

    public with sharing class CaseReasonCompleteController {
//instance fields
public String searchTerm{get; set;}
public String selectedReason{get; set;}
private final Case cas;

public CaseReasonCompleteController() {

public CaseReasonCompleteController(ApexPages.StandardController stdController) {
    this.cas = (Case)stdController.getRecord();

//Javascript action for searching case reason
public static List<String> searchCaseReason(String searchTerm) {
    System.debug('case reason is: '+ searchTerm);
    List<String> caseReason = caseReasonValues(searchTerm);
    return caseReason;

public static List<String> caseReasonValues(String searchTerm) {
    List<String> caseReasonPickList = null;
    if (caseReasonPicklist == null) {
        caseReasonPicklist = new List<String>();
        Schema.DescribeFieldResult field = Case.Reason.getDescribe();
        for (Schema.PicklistEntry f : field.getPicklistValues()) {
            String caseLabel = f.getLabel();
    return caseReasonPickList;
}    }

1 Answer 1


I got the error to go away by making the remote action 'searchCaseReason' global instead of public. Check out the below link for more information on scope and visibility with @RemoteAction methods:



You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .