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 . 

Class:

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){
system.debug('---------------------'+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('========='+u.First_Name__c);
uselist.add(u);
system.debug('*******************Insert Opration');
try{
insert uselist;
}
catch(DMLException e){
ApexPages.addMessages(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;
alert('&&&&'+UsernameJS);
if(UsernameJS){
checkusernameTest.getuser(UsernameJS, function(result, event){
if(event.status){
document.getElementById('accid').innerHTML ="Not available";
}
else{
document.getElementById('accid').innerHTML ="Available";
}
}, {escape:true});
}
}
</script>
<apex:form id="form1">
<apex:pageBlock id="block">
<apex:pageMessages />
<apex:pageBlockButtons >
<apex:commandButton value="save" action="{!save}"/>
</apex:pageBlockButtons>
<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>
<apex:pageBlockSection id="sec1">
<apex:pageBlockSectionItem id="theFirstItem">
<span id="accid"/>
</apex:pageBlockSectionItem>
</apex:pageBlockSection>
</apex:pageBlock>
</apex:form>
</apex:page>

Thanks,