071_salesforce 页面自动检索匹配显示设置

通常我们会有需求：在搜索框中输入关键词，点击后面搜索，相关数据会显示在输入框的下面供选择，如下图

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

<apex:page >

    <apex:form >

        <c:autocomplete_component ComponentLabel="Enter Account Name : "/>

    </apex:form>

</apex:page>

巴特西

071_salesforce 页面自动检索匹配显示设置

最新文章

热门文章