salesforce零基礎學習（八十）使用autoComplete 輸入內容自動聯想結果以及去重實現

項目中，我們有時候會需要實現自動聯想功能，比如我們想輸入用戶或者聯系人名稱，去聯想出系統中有的相關的用戶和聯系人，當點擊以后獲取相關的郵箱或者其他信息等等。這種情況下可以使用jquery ui中的autoComplete實現。

此篇需求為在輸入框中輸入檢索詞對數據庫中User表和Contact表的Name字段進行檢索，符合條件的放在聯想列表中，當用戶選擇相應的名稱后，輸入框中顯示此名稱對應的郵箱地址。

實現此功能可以整體分成三步：

1.通過輸入內容檢索相關表中符合條件的數據；

2.對檢索的數據進行去重以及封裝；

3.前台綁定autoComplete實現自動聯想功能。

一.通過輸入內容檢索相關表中符合條件的數據

因為要對兩個表進行操作，使用SOQL需要對兩個表進行查詢，並對搜索結果進行拼接，這種方式使用SOQL只能對每個字符進行like操作。比如輸入中行大連，使用SOQL需要拆分成 where name like '%中%行%大%連%'。此種檢索搜索出來的結果可能會搜索出用戶不想搜索出來的結果，比如 ‘行連大中’。而且對多個表操作推薦使用SOSL，所以此處使用SOSL進行檢索操作。

SOSL的操作以及檢索封裝可以參看：salesforce零基礎學習（七十五）淺談SOSL（Salesforce Object Search Language），此篇使用封裝的方法作為Util。

二.對檢索的數據進行去重以及封裝

對於搜索結果，我們需要三部分內容：

• 搜索的數據中對象的名稱：objName;
• 搜索的數據類型，屬於User還是Contact: objType;
• 搜索的數據中對象的郵箱：objEmail

所以我們封裝一下這個結果集的類，包含三個字段。因為我們最終需要的是用戶/聯系人郵箱，如果用戶/聯系人名稱和用戶/聯系人郵箱完全相同，則我們假定他們是相同的數據。所以我們重寫一下equals()和hashCode()方法，定義一下兩條數據相同的規則。定義后，可以先使用Set接受結果集進行去重，然后轉換成List進行結果返回。代碼如下：

public without sharing class AutoRetrieveController {

    public String content{get;set;}

    @RemoteAction
    public static List<ObjWrapper> retrieveUsersOrContacts(String name) {
        //返回的結果集
        List<ObjWrapper> results;
        //用於去重的set，去除名稱和email相同的數據
        Set<ObjWrapper> resultSet = new Set<ObjWrapper>();
        //封裝數據查詢曾
        SOSLController.RetrieveWrapper wrapper = new SOSLController.RetrieveWrapper();
        wrapper.retrieveKeyword = name;
        wrapper.searchGroup = 'NAME FIELDS';
        wrapper.objName2FieldsMap = new Map<String,List<String>>();
        List<String> userFields = new List<String>{'Name','Email'};
        List<String> contactFields = new List<String>{'Name','Email'};
        wrapper.objName2FieldsMap.put('user',userFields);
        wrapper.objName2FieldsMap.put('contact',contactFields);
        //獲取結果顯示列表
        List<SOSLController.SearchResultWrapper> searchResultList = SOSLController.search(wrapper);
        //迭代，數據轉換以及去重處理
        if(searchResultList!= null && searchResultList.size() > 0) {
            for(SOSLController.SearchResultWrapper temp : searchResultList) {
                ObjWrapper tempWrapper = new ObjWrapper();
                tempWrapper.objType = temp.objName;
                Map<String,Object> fieldsMap = temp.objFieldName2Value;
                if(fieldsMap.get('Name') != null) {
                    tempWrapper.objName = (String)fieldsMap.get('Name');
                }
                if(fieldsMap.get('Email') != null) {
                    tempWrapper.objEmail = (String)fieldsMap.get('Email');
                }
                resultSet.add(tempWrapper);
            }
        }
        if(resultSet.size() > 0) {
            results = new List<ObjWrapper>(resultSet);
        } else {
            results = new List<ObjWrapper>();
        }
        return results;
    }

    public class ObjWrapper {
        public String objName{get;set;}
        public String objEmail{get;set;}
        public String objType{get;set;}

        public Boolean equals(Object o){
            Boolean result = false;
            if(o instanceof ObjWrapper) {
                ObjWrapper obj = (ObjWrapper)o;
                if(objEmail != null && objName != null) {
                    if(objEmail.equalsIgnoreCase(obj.objEmail) && objName.equalsIgnoreCase(obj.objName)) {
                        result = true;
                    }
                }
                
            }
            return result;
        }

        public Integer hashCode() {
            return 1;
        }
    }
}

三.前台綁定autoComplete實現自動聯想功能

使用jquery ui的autoComplete功能，需要下載jquery ui 的js以及css文件，頁面使用了jquery，所以也需要使用jquery的js文件。下載后壓縮成zip包，上傳到static resource便可以引用了。

此處為將三個文件放在了jquery的文件夾下，上傳了zip包名稱為JqueryUI。頁面代碼如下：

<apex:page controller="AutoRetrieveController">

    <apex:includeScript value="{!URLFOR($Resource.JqueryUI, 'jquery/jquery.js')}" />
    <apex:includeScript value="{!URLFOR($Resource.JqueryUI, 'jquery/jquery-ui.min.js')}" />
    <apex:stylesheet value="{!URLFOR($Resource.JqueryUI, 'jquery/jquery-ui.min.css')}" />
    <apex:form>
        <apex:inputText id="content" value="{!content}" onmousedown="autoCompleteList()" styleClass="contentWidth"/>
    </apex:form>


    <script>

        j$ = jQuery.noConflict();

        function autoCompleteList(){
            var contentDom = j$("input[id$=content]");
            if (contentDom.size() == 0) {
                return ;
            }
            contentDom.autocomplete({
                minLength: 2,
                autoFocus: true,
                source: function(request, response) {
                    queryTerm =  request.term;
                    console.log(queryTerm);
                    if(queryTerm != '') {
                        AutoRetrievController.retrieveUsersOrContacts(
                            queryTerm,
                            function(result, event) {
                                if (event.type == 'exception') {
                                } else {
                                    sObjects = result;
                                    if (0 == sObjects.length) {
                                        response(null);
                                    } else {
                                        response(sObjects);
                                    }
                                }
                        });
                    }
                },
                focus: function(event, ui) {
                    return false;
                },

                select: function(event, ui) {
                    this.value = ui.item.objEmail;
                    return false;
                },
            }).data("uiAutocomplete")._renderItem = function(ul, item) {
                    var entry = item.objName +'\t\t' + item.objType;
                    entry = entry.replace(queryTerm, "<b>" + queryTerm + "</b>");
                    return j$( "<li></li>" )
                            .data( "item.autocomplete", item )
                            .append( "<a>" + entry + "</a>" )
                            .appendTo( ul );
            };
        }

    </script>
</apex:page>

效果展示：

總結：聯想功能在開發中還是比較常用的，autoComplete功能有好多相關的方法，可以去官網或者其他渠道了解相關方法進行UI的美化。篇中只是對基礎功能進行拋磚引玉。

還有好多功能點需要優化，比如對數據檢索沒有進行相關limit的限制，去重方法寫的過於簡單，沒有分別考慮null的處理等等。有興趣的小伙伴可以繼續完善。