I have developed page with autoComplete feature. I'm getting an Uncaught SyntaxError: Unexpected identifier error because of symbols used in Account Names such as "诸城金盛-abc Commerce and" Co., Ltd. I'm posting my code for reference.
Visualforce page Code:
<apex:page id="pageId" standardController="Account" lightningStylesheets="{!$User.UIThemeDisplayed == 'Theme4d'}" extensions="SFI_AccountExtension">
<html lang="en">
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<title>jQuery UI Autocomplete - Default functionality</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"/>
<style>
.ui-autocomplete {
max-height: 100px;
overflow-y: auto;
overflow-x: hidden;
}
* html .ui-autocomplete {
height: 100px;
}
td.data2Col {
text-align: center !important;
}
table {
border:0px;
border-collapse:collapse;
border-spacing:0px;
}
td,th {
padding:0px;
border-width:0px;
margin:0px;
}
th{
width : 50px !important;
}
th{
width : 50px !important;
padding-bottom: 20px;
}
table#mytable tr td:first-child{display:none;}
table#mytable th{width:12%}
table#mytable td{text-align:left;}
</style>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<apex:form id="formID">
<apex:includeScript value="https://code.jquery.com/jquery-1.12.4.js" />
<apex:includeScript value="https://code.jquery.com/ui/1.12.1/jquery-ui.js" />
<center>
<apex:pageblock mode="Edit" id="pageBLockID" >
<apex:pageMessages id="showmsg"></apex:pageMessages>
<apex:pageBlockSection id="pageblockSectionID" title="Auto Complete Demo" columns="1" collapsible="false" >
<table cellspacing="0" cellpadding="0" id="mytable">
<tr id="tr1Id">
<apex:outputPanel >
<th><apex:outputLabel value="Account" style="color: #4a4a56; font-weight: bold; font-size:91%; text-align: left; "></apex:outputLabel></th>
<td>
<div class="requiredInput"><div class="requiredBlock"></div>
<apex:inputText label="Account " value="{!selectedAccount}" id="AccountIds" style="width : 206px;" />
</div>
</td>
</apex:outputPanel>
</tr>
</table>
</apex:pageblockSection>
</apex:pageblock>
</center>
</apex:form>
<script>
$( function() {
var availableTags = {!accList};
$('[id$=AccountIds]').autocomplete({
source: availableTags
});
} );
</script>
</html>
</apex:page>
Apex Code:
public class SFI_AccountExtension {
public Account accountRecord {
get;
set;
}
public List < String > accList {
get;
set;
}
public String selectedAccount{
get;
set;
}
public SFI_AccountExtension(ApexPages.StandardController sc) {
selectedAccount = '';
accountRecord = (Account) sc.getRecord();
getAccountList();//method to load list of accounts
}
//Method to supply list of account with the record type name 'SAP Sold-To Customer' present in salesforce for auto complete
public List < String > getAccountList() {
accList = new List < String > ();
Id RecordTypeId = [SELECT Id, Name FROM RecordType WHERE SobjectType = 'Account'
AND Name = 'SAP Sold-To Customer'
limit 1
].id;
for (Account acc: [select name, SAP_Customer_Number__c from Account where recordTypeId =: RecordTypeId]) {
accList.add('"' + acc.SAP_Customer_Number__c + ' - ' + acc.name + '"');
}
return accList;
}
}
Can somebody please tell how to avoid this type of error.
