+ Start a Discussion

How to add suggestions for user name in VF Page using Java Script Remoting

Hi ,


Case : I have created a custom object Users__c with three Field First Name, Last Name, User Name , I have created a VF page with First Name, Last Name , User Name .

 1) After entering Fisrt Name, Last Name  & User Name if User name is already created in records i am using Java Script Remoting and showing a msg 'Available', 'Not Available'  when user will enter user name in User name text box i am calling a function on event onchange this is working .


Requerment : in my case i want also show some suggestion value if that user name is not  Not Available . Example scotttiger is already in record suggestion should be Scotttiger.14,scotttiger123 like this .


please help me regarding this . 




global with sharing class checkusernameTest{
public String Firstname { get; set; }
public String Lastname { get; set; }
public String username { get; set; }
public static Users__c us { get; set; }
public checkusernameTest() {
@ RemoteAction
global static Users__c getuser(String username){
us = [select id,User_Name__c from Users__c where User_Name__c = :username];
return us;
public Pagereference save(){
list<Users__c> uselist = new list<Users__c>();
Users__c u = new Users__c();
u.First_Name__c = Firstname;
u.Last_Name__c = Lastname;
u.User_Name__c = username;
system.debug('*******************Insert Opration');
insert uselist;
catch(DMLException e){
return null;
return null;



VF page :

<apex:page controller="checkusernameTest">
<script type="text/javascript">
function getusernameJS() {
var UsernameJS = document.getElementById('{!$Component.form1.block.sec.usernam}').value;
checkusernameTest.getuser(UsernameJS, function(result, event){
document.getElementById('accid').innerHTML ="Not available";
document.getElementById('accid').innerHTML ="Available";
}, {escape:true});
<apex:form id="form1">
<apex:pageBlock id="block">
<apex:pageMessages />
<apex:pageBlockButtons >
<apex:commandButton value="save" action="{!save}"/>
<apex:pageBlockSection id="sec">
<apex:inputText label="First Name" value="{!Firstname}"/>
<apex:inputText label="Last Name" value="{!LastName}"/>
<apex:inputText label="User Name" value="{!username}" onchange="getusernameJS()" id="usernam"/>
<apex:outputLabel title="hi" id="op"/>
<apex:pageBlockSection id="sec1">
<apex:pageBlockSectionItem id="theFirstItem">
<span id="accid"/>