通常我们会有需求：在搜索框中输入关键词，点击后面搜索，相关数据会显示在输入框的下面供选择，如下图
First I am assuming that you already have Static Resource of named “AutoCompleteWithModal“. This Static resource has all images, CSS and JQuery library needed to implement this component.
使用JQueryUI 自动完成组件
Visualforce Account_JSON :
<apex:page Controller="AccountJSONCreator" contentType="application/x-JavaScript; charset=utf-8" showHeader="false" standardStylesheets="false" sidebar="false">
{!JSON}
</apex:page>
Controller AccountJSONCreator :
public with sharing class AccountJSONCreator {
public String getJSON()
{
String AccountName = Apexpages.currentPage().getParameters().get('AccName');
List<AccountWrapper> wrp = new List<AccountWrapper>();
for (Account a : [Select a.Id, a.Website, a.Name, a.BillingCountry, a.BillingCity
From
Account a
WHERE Name Like : '%'+AccountName+'%' ]) {
AccountWrapper w = new AccountWrapper (a.Name, nullToBlank (a.BillingCountry), nullToBlank (a.BillingCity));
wrp.add(w);
}
return JSON.serialize(wrp);
}
public String nullToBlank(String val)
{
return val == null ?'':val;
}
public class AccountWrapper
{
String AccName,BillingCountry,BillingCity;
public AccountWrapper(String aName, String bCountry, String bCity)
{
AccName = aName;
BillingCountry = bCountry;
BillingCity = bCity;
}
}
static testMethod void AccountJSONCreatorTest() {
AccountJSONCreator obj = new AccountJSONCreator();
obj.getJSON();
}
}
Now let’s create a Component which will make AJAX request to above visualforce page “Account_JSON” and Parse JSON page using JQuery.
Component Autocomplete_Component :
<apex:component>
<apex:attribute name="ComponentLabel" description="Label of Component"
type="String" required="true"/>
<apex:stylesheet value="{!URLFOR($Resource.AutoCompleteWithModal, '/JQueryUI/css/ui-lightness/jquery-ui-1.8.17.custom.css')}"/>
<apex:includeScript value="{!URLFOR($Resource.AutoCompleteWithModal, '/JQueryUI/js/jquery-1.7.1.min.js')}"/>
<apex:includeScript value="{!URLFOR($Resource.AutoCompleteWithModal, '/JQueryUI/js/jquery-ui-1.8.17.custom.min.js')}"/>
<apex:stylesheet value="{!URLFOR($Resource.AutoCompleteWithModal, '/JQueryModal/css/basic.css')}"/>
<style type="text/css">
.ui-autocomplete-loading { background: white url('{!URLFOR($Resource.AutoCompleteWithModal, 'AjaxLoad.gif')}') right center no-repeat; }
</style>
{!ComponentLabel} <apex:inputText id="theTextInput"/>
<script type="text/javascript">
//$ac - AutoComplete
$ac = jQuery.noConflict();
function getLoadingImage()
{
var loadImagURL = "{!URLFOR($Resource.AutoCompleteWithModal, 'BigLoad.gif')}";
var retStr = ['<img src="', loadImagURL ,'" title="loading..." alt="loading..." class="middleAlign" />'];
return retStr.join("");
}
var sourcePage = 'https://c.ap1.visual.force.com/apex/Account_JSON?core.apexpages.devmode.url=0';
$ac(function() {
var txtVal = $ac('[id="{!$Component.theTextInput}"]');
//This method returns the last character of String
function extractLast(term) {
return term.substr(term.length - 1);
}
$ac('[id="{!$Component.theTextInput}"]').autocomplete({
source: function( request, response ) {
//Abort Ajax
var $this = $ac(this);
var $element = $ac(this.element);
var jqXHR = $element.data('jqXHR');
if(jqXHR)
jqXHR.abort();
$ac('[id="{!$Component.theTextInput}"]').addClass('ui-autocomplete-loading');
//prompt('',sourcePage+'&key='+txtVal.val());
$element.data('jqXHR',$ac.ajax({
url: sourcePage+'&AccName='+txtVal.val(),
dataType: "json",
data: {
},
success: function( data ) {
response( $ac.map( data , function( item ) {
return {
label: '<a>'+
item.AccName+"<br />"+
'<span style="font-size:0.8em;font-style:italic">'
+item.BillingCity+', '+item.BillingCountry+
"</span></a>",
value: item.AccName
}
}));
},
complete: function() {
//This method is called either request completed or not
$this.removeData('jqXHR');
//remove the class responsible for loading image
$ac('[id="{!$Component.theTextInput}"]').removeClass('ui-autocomplete-loading');
}
})
);
},
search: function() {
/*
// If last character is space
var term = extractLast(this.value);
if(term == " ")
{
return true;
}
*/
//If String contains at least 1 space
if (this.value.indexOf(" ") >= 0)
{
$ac('[id="{!$Component.theTextInput}"]').autocomplete('option', 'delay', 500);
return true;
}
return false;
},
focus: function() {
// prevent value inserted on focus
return false;
},
select: function(event, ui) {
var selectedObj = ui.item;
//alert(selectedObj.compId);
//getCompanyDetail(selectedObj.compId);
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:component>
Viusalforce Page : AutoCompleteDemo