AutoComplete in Visualforce using JQueryUI
This is AutoComplete Search and I am implementing using Jquery AutoComplete library and Apex RemoteAction. Read More...
I have assigned minimum 3 character in javascript for the search in text field. After select the search result it has assigned to selectedparisName variable and we can use this variable value anywhere in apex class.
Apex Class: ae_PACSurveyCtlr
global with sharing class ae_PACSurveyCtlr{
public String parisName {get;set;}
public String selectedparisName {get;set;}
public String eventId {get;set;}
public ae_PACSurveyCtlr(ApexPages.StandardController controller) {
}
public void selectedParisvalue(){
string selectID = Apexpages.currentPage().getParameters().get('idVal');
system.debug('>>>>>selectID'+selectID);
if(selectID != null){
selectedparisName = selectID;
}
}
@RemoteAction
public static List<WrapperClass1> findAccounts(String s){
List<WrapperClass1> wrpList = new List<WrapperClass1>();
String accNamePat = '%'+s + '%';
String aname;
if(s.trim() != null){
for(Account acc: [Select id, Name,BillingStreet,BillingState,BillingPostalCode from Account where name like :accNamePat]){
aname = '';
aname = acc.name;
wrpList.add(new WrapperClass1(string.valueof(acc.id), aname));
}
}
return wrpList ;
}
public class WrapperClass1
{
String ids,label;
public WrapperClass1(String wrid, String name)
{
this.label = name;
this.ids = wrid;
}
}
}
Visualforce Page: AccountSearch
<apex:page standardController="Account" extensions ="ae_PACSurveyCtlr" id="thePage">
<style type="text/css">
#ui-id-1,.ui-widget-content .ui-autocomplete{
overflow-y: scroll !important;
height: 300px !important;
width: 250px !important;
overflow-x: hidden !important;
}
</style>
<apex:form>
<apex:actionFunction action="{!selectedParisvalue}" name="getselectedObjID" reRender="asa">
<apex:param name="idVal" value=""/>
</apex:actionFunction>
</apex:form>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.0/themes/base/jquery-ui.css" />
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script>
<script>
$ac = jQuery.noConflict();
$ac( function() {
$ac( ".txtsrch" ).autocomplete({
minLength: 3,
source: function(request, response) {
queryTerm = $ac( ".txtsrch" ).val();
Visualforce.remoting.Manager.invokeAction(
'{!$RemoteAction.ae_PACSurveyCtlr.findAccounts}', queryTerm, function(result, event){
if(event.type == 'exception')
{
//alert(event.message);
}else {
response( $ac.map( result , function( item ) {
return {
label: item.label,
ids: item.ids
}
}));
}
});
},
focus: function() {
// prevent value inserted on focus
return false;
},
select: function(event, ui) {
var selectedObj = ui.item;
//alert(selectedObj.ids);
getselectedObjID(selectedObj.ids);
return true;
}
}).data("autocomplete")._renderItem = autoCompleteRender;
function autoCompleteRender(ul, item) {
return $ac("<li></li>").data("item.autocomplete", item).append(item.label).appendTo(ul);
}
} );
</script>
<apex:form id="myForm">
<Apex:inputText value="{!parisName}" styleClass="txtsrch" />
</apex:form>
</apex:page>