Why can't I return a List<Account> or an array of wrappers?

I would like to display a list of Accounts or Account wrappers in my VF page. I have a controller that works for a LWC and would like to add methods for a VF page, as well, that does pretty much the same thing. I have a very simple VF page that I nearly copied from the developer guide, and Salesforce wants to create a method that just returns a String, but I want to return a list of accounts. For now, I am just trying to pass in some fixed parameters. Can anyone tell me what is wrong here?

Page:

<apex:page docType="html-5.0" controller="AccountTypeAheadSearchHelper">
  <h1>Account Type-Ahead Search Demo VF</h1>
  <apex:outputLink value="{!URLFOR($Action.Account.View,'0018c00002N0qccAAB')}">Open this Account</apex:outputLink>
  <apex:form >
    <apex:actionFunction name="onKeyUpHandler" action="{!onKeyUpHandlerVF}">
      <apex:param name="currentValue" assignTo="{!accountSearchVF}" value="" />
    </apex:actionFunction>
    <div>
      <apex:inputText label="Search for account" id="theAccountName" value="{!accountSearchVF}" onkeyup="onKeyUpHandler(document.getElementById({!$Component.theAccountName}).nodeValue);" />
    </div>
    <apex:commandButton action="{!saveVF}" value="Save" id="theSaveButtonVF" />
  </apex:form>
  <apex:pageBlock title="Matching Accounts" mode="view">
      <apex:dataList value="{!matchingAccountsVF}" var="matchingAccount" >
          <apex:outputText value="{!matchingAccount.Name}" />
      </apex:dataList>
  </apex:pageBlock>
</apex:page>

Controller:

public with sharing class AccountTypeAheadSearchHelper {

    private String accountSearchVFValue = 'Enter an account name';

    /**
     * Given a searchString, returns an array of MatchingAccountsWrappers for the LWC to consume
     *
     * @param searchString a part of the name of the account to search for
     *
     * @return an array of MatchingAccountsWrappers
     */
    @AuraEnabled
    public static MatchingAccountsWrapper[] getMatchingAccounts(String searchString, Boolean showContacts) {
        String searchSpec = '%' + searchString + '%';
        List<Account> accountsFound;
        if (showContacts) {
            accountsFound = [
                SELECT Id, Name,
                    (SELECT Id, Name FROM Contacts ORDER BY Name) 
                FROM Account 
                WHERE Name LIKE :searchSpec 
                ORDER BY Name];
        } else {
            accountsFound = [
                SELECT Id, Name
                FROM Account 
                WHERE Name LIKE :searchSpec 
                ORDER BY Name];
        }

        List<MatchingAccountsWrapper> matchingAccounts = new List<MatchingAccountsWrapper>();
        for (Account ma : accountsFound) {

            MatchingAccountsWrapper mar = new MatchingAccountsWrapper(ma.Id, ma.Name, showContacts ? ma.Contacts: null);
            matchingAccounts.add(mar);
            system.debug('#@# matching account.name = ' + ma.Name);
        }
        return matchingAccounts;
    }

    public List<Account> getMatchingAccountsVF(String searchString, Boolean showContacts) {
        String searchSpec = '%' + searchString + '%';
        List<Account> accountsFound;
        if (showContacts) {
            accountsFound = [
                SELECT Id, Name,
                    (SELECT Id, Name FROM Contacts ORDER BY Name) 
                FROM Account 
                WHERE Name LIKE :searchSpec 
                ORDER BY Name];
        } else {
            accountsFound = [
                SELECT Id, Name
                FROM Account 
                WHERE Name LIKE :searchSpec 
                ORDER BY Name];
        }

        return accountsFound;

    }

    public PageReference saveVF() {
        system.debug('#@# AccountTypeAheadSearchHelper:saveVF() method');
        return null;
    }

    public String accountSearchVF {
        get {
            system.debug('#@# AccountTypeAheadSearchHelper:accountSearchVF() getter: accountSearchVFValue = ' + accountSearchVFValue);
            return accountSearchVFValue;
        }

        set {
            system.debug('#@# AccountTypeAheadSearchHelper:accountSearchVF() setter: value = ' + value);
            accountSearchVFValue = value;
        }
    }

    public void onKeyUpHandlerVF() {
        system.debug('#@# AccountTypeAheadSearchHelper:onKeyUpHandlerVF(): BEGIN');
        system.debug('#@# AccountTypeAheadSearchHelper:onKeyUpHandlerVF(): accountSearchVFValue = ' + accountSearchVFValue);
        MatchingAccountsWrapper[] mars = getMatchingAccounts(accountSearchVFValue, false);
        system.debug('#@# AccountTypeAheadSearchHelper:onKeyUpHandlerVF(): END');
    }

    private class MatchingAccountsWrapper {

        public MatchingAccountsWrapper(String k, String n) {
            key = k;
            name = n;
        }

        public MatchingAccountsWrapper(String k, String n, List<Contact> c) {
            key = k;
            name = n;
            relatedContacts = c;
        }

        public MatchingAccountsWrapper(Account a) {
            key = a.Id;
            name = a.Name;
        }

        @AuraEnabled
        public string key {get; set;}

        @AuraEnabled
        public string name {get; set;}

        @AuraEnabled
        public string link {get {
            return URL.getSalesforceBaseUrl().toExternalForm() + '/' + this.key;
        } set;}

        private List<Contact> relatedContacts {get; set;}

        @AuraEnabled
        public List<MatchingContactsWrapper> contacts {get {
            if (relatedContacts != null) {
                List<MatchingContactsWrapper> matchingContacts = new List<MatchingContactsWrapper>();
                for (Contact matchingContact : relatedContacts) {
                    MatchingContactsWrapper mac = new MatchingContactsWrapper(matchingContact);
                    matchingContacts.add(mac);
                }
                return matchingContacts;
            } else {
                return null;
            }
        } set;}
    }

    private class MatchingContactsWrapper {

        public MatchingContactsWrapper(Contact c) {
            key = c.Id;
            name = c.Name;
        }

        @AuraEnabled
        public string key {get; set;}

        @AuraEnabled
        public string name {get; set;}

        @AuraEnabled
        public string link {get {
            return URL.getSalesforceBaseUrl().toExternalForm() + '/' + this.key;
        } set;}
    }

}

I think I really should be able to use the same getMatchingAccounts method that I use for the LWC, have also tried getMatchingAccountsVF. But it tells me that it doesn't exist in the controller. When I let Salesforce create the method, I makes a Public String method. I don't understand why it is making a String method.

The form part is not even relevant here, just the pageblock with the datalist in it. I would like to call "{!matchingAccountsVF('st', false)}" as a starting point and then pass in actual parameters from the user, but this doesn't work.

I am basing this on the very simple example I see here: https://developer.salesforce.com/docs/atlas.en-us.pages.meta/pages/pages_compref_dataList.htm

You can reuse Apex written for Aura/LWC in VF but the main difference is "state". Aura and LWC are stateless, you pass everything you need to server (or query it fresh) explicitly and the methods have to be static (btw your @AuraEnabled could really use cacheable=true). In Visualforce state is passed silently for you in a hidden encoded variable. All variables (except the ones declared transient) will be passed from the page to apex and class' internal state will be reconstructed.

You need a kind of autocomplete, right? You have few ways to do it. (Plus there are lots of examples on the net) Depends if you want it "pure Visualforce way" with that syntax or you're more comfortable with doing everything in JS.

• completely reuse your component (read up about "Lightning Out")
• call the javascript similar to LWC (as a static function, lightweight, mobile-friendly) with "Remoting". It's bit old and I guess you could say it's early version of Aura - JavaScript function, handle the response in JS (not VF), rebuild your list of accounts in JS.
• call the server side code "old school visualforce" - with full resubmit of the form (or onKeyUp, doesn't matter). The key thing will be that parameter will be passed as part of that whole viewstate thing. And then your getMatchingAccountsVF doesn't need parameters, it becomes pure getter. It'll just rely on normal class variable with the search term.

public class Stack73082136 {
    
    // Service part (static, useable in Aura/LWC but eventually maybe also as a REST service)
    // This method would typically throw exceptions, perhaps AuraHandledException
    @RemoteAction @AuraEnabled(cacheable=true)
    public static MatchingAccountsWrapper[] getMatchingAccounts(String searchString, Boolean showContacts) {
        String searchSpec = '%' + searchString + '%';
        List<Account> accountsFound;
        if (showContacts) {
            accountsFound = [
                SELECT Id, Name,
                    (SELECT Id, Name FROM Contacts ORDER BY Name) 
                FROM Account 
                WHERE Name LIKE :searchSpec 
                ORDER BY Name];
        } else {
            accountsFound = [
                SELECT Id, Name
                FROM Account 
                WHERE Name LIKE :searchSpec 
                ORDER BY Name];
        }

        List<MatchingAccountsWrapper> matchingAccounts = new List<MatchingAccountsWrapper>();
        for (Account ma : accountsFound) {
            MatchingAccountsWrapper mar = new MatchingAccountsWrapper(ma.Id, ma.Name, showContacts ? ma.Contacts: null);
            matchingAccounts.add(mar);
            system.debug('#@# matching account.name = ' + ma.Name);
        }
        return matchingAccounts;
    }
    
    // Visualforce part (old school, stateful)
    // This would typically not throw exceptions but ApexPages.addMessage() etc.
    // (which means that non-VF context like a trigger, inbound email handler or code called from Flow would crash and burn at runtime; in these you can only do exceptions)
    
    public String searchValue {get;set;}

    public List<MatchingAccountsWrapper> getMatchingAccountsVF() {
        return getMatchingAccounts(searchValue, false);
    }

    public void onKeyUpHandlerVF() {
        system.debug('#@# AccountTypeAheadSearchHelper:onKeyUpHandlerVF(): BEGIN');
        system.debug('#@# AccountTypeAheadSearchHelper:onKeyUpHandlerVF(): accountSearchVFValue = ' + searchValue);
        // do nothing. this method is "stupid", it's only job is to be called, pass the parameter and then the getMatchingAccountsVF
        // will be called by VF engine when it needs to rerender {!matchingAccountsVF} expression
    }

    private class MatchingAccountsWrapper {

        public MatchingAccountsWrapper(String k, String n) {
            key = k;
            name = n;
        }

        public MatchingAccountsWrapper(String k, String n, List<Contact> c) {
            key = k;
            name = n;
            relatedContacts = c;
        }

        public MatchingAccountsWrapper(Account a) {
            key = a.Id;
            name = a.Name;
        }

        @AuraEnabled
        public string key {get; set;}

        @AuraEnabled
        public string name {get; set;}

        @AuraEnabled
        public string link {get {
            return URL.getSalesforceBaseUrl().toExternalForm() + '/' + this.key;
        } set;}

        private List<Contact> relatedContacts {get; set;}

        @AuraEnabled
        public List<MatchingContactsWrapper> contacts {get {
            if (relatedContacts != null) {
                List<MatchingContactsWrapper> matchingContacts = new List<MatchingContactsWrapper>();
                for (Contact matchingContact : relatedContacts) {
                    MatchingContactsWrapper mac = new MatchingContactsWrapper(matchingContact);
                    matchingContacts.add(mac);
                }
                return matchingContacts;
            } else {
                return null;
            }
        } set;}
    }

    private class MatchingContactsWrapper {

        public MatchingContactsWrapper(Contact c) {
            key = c.Id;
            name = c.Name;
        }

        @AuraEnabled
        public string key {get; set;}

        @AuraEnabled
        public string name {get; set;}

        @AuraEnabled
        public string link {get {
            return URL.getSalesforceBaseUrl().toExternalForm() + '/' + this.key;
        } set;}
    }

}

<apex:page docType="html-5.0" controller="Stack73082136">
  <h1>Account Type-Ahead Search Demo VF</h1>
  <apex:form >
      <apex:pageBlock title="1. Total old school">
          <apex:actionRegion>
              <apex:inputText value="{!searchValue}" label="type and click" />
              <apex:commandButton action="{!onKeyUpHandlerVF}" rerender="out1" />
              <apex:outputPanel id="out1">
                <apex:dataList value="{!matchingAccountsVF}" var="acc" >
                    <apex:outputText value="{!acc.Name}" />
                </apex:dataList>
              </apex:outputPanel>
          </apex:actionRegion>
      </apex:pageBlock>
      
      <apex:actionFunction action="{!onKeyUpHandlerVF}" name="onKeyUpJS" rerender="out2">
          <apex:param name="param1" assignTo="{!searchValue}" value="" />
      </apex:actionFunction>

      <apex:pageBlock title="2. Old school (viewstate, not mobile friendly) but at least onkeyup">
          <!-- this is bit rubbish, fires immediately. Realistically you probably want some delay, wait till user stops typing. -->
          <apex:actionRegion>
              <apex:inputText value="{!searchValue}" label="type and wait" onkeyup="onKeyUpJS(this.value);"/>
              <apex:outputPanel id="out2">
                <apex:dataList value="{!matchingAccountsVF}" var="acc" >
                    <apex:outputText value="{!acc.Name}" />
                </apex:dataList>
              </apex:outputPanel>
          </apex:actionRegion>
      </apex:pageBlock>
      
      <script>
      function callRemote(term){
          // call static method in ClassName.methodName format
          Visualforce.remoting.Manager.invokeAction(
            '{!$RemoteAction.Stack73082136.getMatchingAccounts}',
            term,
            false, // no contacts pls
            function(result, event){
                if (event.status) {
                    //debugger;
                    let target = document.getElementById("out3");
                    while (target.firstChild) {
                      target.removeChild(target.firstChild);
                    }
                    result.forEach(item => target.append(item.key + ': ' + item.name + ';'));
                } else if (event.type === 'exception') {
                    document.getElementById("responseErrors").innerHTML = 
                        event.message + "<br/>\n<pre>" + event.where + "</pre>";
                } else {
                    document.getElementById("responseErrors").innerHTML = event.message;
                }
            }, 
            {escape: true}
        );
      }
      </script>
      <apex:pageBlock title="3. VF remoting, the grandfather of Aura. No viewstate, pure html and js">    
          <input type="text" id="text3" label="type and vait v2" onkeyup="callRemote(this.value)" />
          <div id="out3"></div>
          <div id="responseErrors"></div>
      </apex:pageBlock>
  </apex:form>
</apex:page>