{"id":3347,"date":"2013-06-28T23:53:42","date_gmt":"2013-06-28T18:23:42","guid":{"rendered":"http:\/\/JitendraZaa.com\/blog\/?p=3347"},"modified":"2014-04-02T08:56:59","modified_gmt":"2014-04-02T08:56:59","slug":"ajax-based-autocomplete-component-in-salesforce-using-jquery-ui-and-json","status":"publish","type":"post","link":"https:\/\/www.jitendrazaa.com\/blog\/salesforce\/ajax-based-autocomplete-component-in-salesforce-using-jquery-ui-and-json\/","title":{"rendered":"AutoComplete Component in Visualforce using JQueryUI"},"content":{"rendered":"<p>In this tutorial, I am going to explain very Simple AJAX and JSON based Auto Complete component with the help of <a title=\"jQuery UI\" href=\"http:\/\/jqueryui.com\/\" target=\"_blank\" rel=\"nofollow\">JQuery UI<\/a>. First I am assuming that you already have Static Resource of named &#8220;<a title=\"Salesforce Static Resource\" href=\"https:\/\/jitendrazaa.com\/blog\/wp-content\/uploads\/2013\/06\/AutoCompleteWithModal.zip\" target=\"_blank\">AutoCompleteWithModal<\/a>&#8220;\u009d. This Static resource has all images, CSS and JQuery library needed to implement this component.<\/p>\n<p>In <a title=\"JSON Output in Visualforce\" href=\"https:\/\/jitendrazaa.com\/blog\/salesforce\/json-output-in-visualforce\/\" target=\"_blank\">one of my old post<\/a>, I have already explained that how to generate JSON in Visualforce page. So Considering same article I have create Visualforce page named &#8220;Account_JSON&#8221;\u009d which returns list of Accounts on basis of text entered in input field.<!--more--><\/p>\n<p><strong>Live Demo :<\/strong><\/p>\n<p>try searching &#8220;gen&#8221; or &#8220;edg&#8221; and spacebar, It will load account after one space.<\/p>\n<p><iframe loading=\"lazy\" src=\"http:\/\/shivasoft-developer-edition.ap1.force.com\/Exp\/AutoCompleteDemo\" height=\"100\" width=\"100%\" frameborder=\"0\" scrolling=\"no\"><\/iframe><\/p>\n<p><strong>Visualforce Account_JSON :<\/strong><\/p>\n<pre class=\"brush: xml; title: ; notranslate\" title=\"\">\r\n&lt;apex:page Controller=&quot;AccountJSONCreator&quot; contentType=&quot;application\/x-JavaScript; charset=utf-8&quot; showHeader=&quot;false&quot; standardStylesheets=&quot;false&quot; sidebar=&quot;false&quot;&gt;\r\n{!JSON}\r\n&lt;\/apex:page&gt;\r\n<\/pre>\n<p><strong>Controller AccountJSONCreator :<\/strong><\/p>\n<pre class=\"brush: java; title: ; notranslate\" title=\"\">\r\npublic with sharing class AccountJSONCreator {\r\n\r\n    public String getJSON()\r\n    {\r\n        String AccountName = Apexpages.currentPage().getParameters().get('AccName');\r\n        List&lt;AccountWrapper&gt; wrp = new List&lt;AccountWrapper&gt;();\r\n        for (Account a : &#x5B;Select a.Id, a.Website, a.Name, a.BillingCountry, a.BillingCity\r\n                            From\r\n                                Account a\r\n                            WHERE Name Like : '%'+AccountName+'%' ]) {\r\n               AccountWrapper w = new AccountWrapper (a.Name, nullToBlank (a.BillingCountry), nullToBlank (a.BillingCity));\r\n               wrp.add(w);\r\n            }\r\n        return JSON.serialize(wrp);\r\n    }\r\n\r\n    public String nullToBlank(String val)\r\n    {\r\n        return val == null ?'':val;\r\n    }\r\n\r\n    public class AccountWrapper\r\n    {\r\n        String AccName,BillingCountry,BillingCity;\r\n\r\n        public AccountWrapper(String aName, String bCountry, String bCity)\r\n        {\r\n            AccName = aName;\r\n            BillingCountry = bCountry;\r\n            BillingCity = bCity;\r\n        }\r\n    }\r\n\r\n    static testMethod void AccountJSONCreatorTest() {\r\n        AccountJSONCreator obj = new AccountJSONCreator();\r\n        obj.getJSON();\r\n    }\r\n}\r\n<\/pre>\n<p>Now let&#8217;s create a Component which will make AJAX request to above visualforce page &#8220;Account_JSON&#8221;\u009d and Parse JSON page using JQuery.<\/p>\n<p><strong>Component Autocomplete_Component :<\/strong><\/p>\n<pre class=\"brush: xml; title: ; notranslate\" title=\"\">\r\n&lt;apex:component&gt;\r\n &lt;apex:attribute name=&quot;ComponentLabel&quot; description=&quot;Label of Component&quot;\r\n                    type=&quot;String&quot; required=&quot;true&quot;\/&gt;\r\n\r\n&lt;apex:stylesheet value=&quot;{!URLFOR($Resource.AutoCompleteWithModal, '\/JQueryUI\/css\/ui-lightness\/jquery-ui-1.8.17.custom.css')}&quot;\/&gt;\r\n&lt;apex:includeScript value=&quot;{!URLFOR($Resource.AutoCompleteWithModal, '\/JQueryUI\/js\/jquery-1.7.1.min.js')}&quot;\/&gt;\r\n&lt;apex:includeScript value=&quot;{!URLFOR($Resource.AutoCompleteWithModal, '\/JQueryUI\/js\/jquery-ui-1.8.17.custom.min.js')}&quot;\/&gt;\r\n&lt;apex:stylesheet value=&quot;{!URLFOR($Resource.AutoCompleteWithModal, '\/JQueryModal\/css\/basic.css')}&quot;\/&gt;\r\n\r\n&lt;style type=&quot;text\/css&quot;&gt;\r\n    .ui-autocomplete-loading { background: white url('{!URLFOR($Resource.AutoCompleteWithModal, 'AjaxLoad.gif')}') right center no-repeat; }\r\n&lt;\/style&gt;\r\n\r\n{!ComponentLabel} &lt;apex:inputText id=&quot;theTextInput&quot;\/&gt;\r\n\r\n&lt;script type=&quot;text\/javascript&quot;&gt;\r\n\/\/$ac - AutoComplete\r\n\r\n$ac = jQuery.noConflict();\r\n\r\nfunction getLoadingImage()\r\n{\r\n    var loadImagURL = &quot;{!URLFOR($Resource.AutoCompleteWithModal, 'BigLoad.gif')}&quot;;\r\n    var retStr = &#x5B;'&lt;img src=&quot;', loadImagURL ,'&quot; title=&quot;loading...&quot; alt=&quot;loading...&quot; class=&quot;middleAlign&quot; \/&gt;'];\r\n    return retStr.join(&quot;&quot;);\r\n}\r\n\r\nvar sourcePage = 'https:\/\/c.ap1.visual.force.com\/apex\/Account_JSON?core.apexpages.devmode.url=0';\r\n\r\n $ac(function() {\r\n        var txtVal =  $ac('&#x5B;id=&quot;{!$Component.theTextInput}&quot;]');\r\n        \/\/This method returns the last character of String\r\n        function extractLast(term) {\r\n            return term.substr(term.length - 1);\r\n        }\r\n\r\n        $ac('&#x5B;id=&quot;{!$Component.theTextInput}&quot;]').autocomplete({\r\n            source: function( request, response ) {\r\n\r\n                \/\/Abort Ajax\r\n                var $this = $ac(this);\r\n                var $element = $ac(this.element);\r\n                var jqXHR = $element.data('jqXHR');\r\n                if(jqXHR)\r\n                    jqXHR.abort();\r\n\r\n                $ac('&#x5B;id=&quot;{!$Component.theTextInput}&quot;]').addClass('ui-autocomplete-loading');\r\n                \/\/prompt('',sourcePage+'&amp;key='+txtVal.val());\r\n                $element.data('jqXHR',$ac.ajax({\r\n                    url: sourcePage+'&amp;AccName='+txtVal.val(),\r\n                    dataType: &quot;json&quot;,\r\n                    data: {\r\n                    },\r\n                    success: function( data ) {\r\n                        response( $ac.map( data , function( item ) {\r\n                            return {\r\n                                label: '&lt;a&gt;'+\r\n                                item.AccName+&quot;&lt;br \/&gt;&quot;+\r\n                                '&lt;span style=&quot;font-size:0.8em;font-style:italic&quot;&gt;'\r\n                                +item.BillingCity+', '+item.BillingCountry+\r\n                                &quot;&lt;\/span&gt;&lt;\/a&gt;&quot;,\r\n                                value: item.AccName\r\n                            }\r\n                        }));\r\n                    },\r\n                    complete: function() {\r\n\r\n                        \/\/This method is called either request completed or not\r\n                        $this.removeData('jqXHR');\r\n\r\n                        \/\/remove the class responsible for loading image\r\n                        $ac('&#x5B;id=&quot;{!$Component.theTextInput}&quot;]').removeClass('ui-autocomplete-loading');\r\n                    }\r\n                })\r\n                );\r\n\r\n            },\r\n            search: function() {\r\n                \/*\r\n                \/\/ If last character is space\r\n                    var term = extractLast(this.value);\r\n                    if(term == &quot; &quot;)\r\n                    {\r\n                        return true;\r\n                    }\r\n                *\/\r\n\r\n                \/\/If String contains at least 1 space\r\n                if (this.value.indexOf(&quot; &quot;) &gt;= 0)\r\n                {\r\n                    $ac('&#x5B;id=&quot;{!$Component.theTextInput}&quot;]').autocomplete('option', 'delay', 500);\r\n                    return true;\r\n                }\r\n                return false;\r\n            },\r\n            focus: function() {\r\n                \/\/ prevent value inserted on focus\r\n                return false;\r\n            },\r\n            select: function(event, ui) {\r\n                var selectedObj = ui.item;\r\n                \/\/alert(selectedObj.compId);\r\n                \/\/getCompanyDetail(selectedObj.compId);\r\n                return true;\r\n            }\r\n        }).data(&quot;autocomplete&quot;)._renderItem = autoCompleteRender;\r\n\r\n    });\r\n\r\nfunction autoCompleteRender(ul, item) {\r\n    return $ac(&quot;&lt;li&gt;&lt;\/li&gt;&quot;).data(&quot;item.autocomplete&quot;, item).append(item.label).appendTo(ul);\r\n}\r\n\r\n&lt;\/script&gt;\r\n&lt;\/apex:component&gt;\r\n<\/pre>\n<p>Now Visualforce page, which will host above Component.<\/p>\n<p><strong>Viusalforce Page : AutoCompleteDemo<\/strong><\/p>\n<pre class=\"brush: xml; title: ; notranslate\" title=\"\">\r\n&lt;apex:page &gt;\r\n    &lt;apex:form &gt;\r\n        &lt;c:autocomplete_component ComponentLabel=&quot;Enter Account Name : &quot;\/&gt;\r\n    &lt;\/apex:form&gt;\r\n&lt;\/apex:page&gt;\r\n<\/pre>\n<figure id=\"attachment_3350\" aria-describedby=\"caption-attachment-3350\" style=\"width: 599px\" class=\"wp-caption aligncenter\"><a href=\"https:\/\/i0.wp.com\/jitendrazaa.com\/blog\/wp-content\/uploads\/2013\/06\/JQuery-UI-and-JSON-based-AJAX-AutoComplete-Component-in-Salesforce.png?ssl=1\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-3350\" alt=\"JQuery UI and JSON based AJAX AutoComplete Component in Salesforce\" src=\"https:\/\/i0.wp.com\/jitendrazaa.com\/blog\/wp-content\/uploads\/2013\/06\/JQuery-UI-and-JSON-based-AJAX-AutoComplete-Component-in-Salesforce.png?resize=599%2C407&#038;ssl=1\" width=\"599\" height=\"407\" \/><\/a><figcaption id=\"caption-attachment-3350\" class=\"wp-caption-text\">JQuery UI and JSON based AJAX AutoComplete Component in Salesforce<\/figcaption><\/figure>\n<p>Download Static resource &#8211;\u00a0<a href=\"https:\/\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2013\/06\/AutoCompleteWithModal1.zip\">AutoCompleteWithModal<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>In this tutorial, I am going to explain very Simple AJAX and JSON based Auto Complete component with the help of JQuery UI. First I am assuming that you already have Static Resource of named &#8220;AutoCompleteWithModal&#8220;\u009d. This Static resource has all images, CSS and JQuery library needed to implement this component. In one of my [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"advanced_seo_description":"","jetpack_seo_html_title":"","jetpack_seo_noindex":false,"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"jz_research_post":"","_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[26,9],"tags":[33,337,44,126,134,135,136,331],"class_list":["post-3347","post","type-post","status-publish","format-standard","hentry","category-web","category-salesforce","tag-ajax","tag-apex","tag-autocomplete","tag-javascript","tag-jquery","tag-jquery-ui","tag-json","tag-salesforce"],"jetpack_featured_media_url":"","jetpack_sharing_enabled":true,"jetpack-related-posts":[{"id":3917,"url":"https:\/\/www.jitendrazaa.com\/blog\/salesforce\/ajax-based-autocomplete-typeahead-directive-in-angularjs\/","url_meta":{"origin":3347,"position":0},"title":"Ajax based AutoComplete \/ TypeAhead Directive in AngularJS","author":"Jitendra","date":"July 15, 2014","format":false,"excerpt":"Previously we already discussed below Auto Complete components: Ajax Based Multiselect JQuery Autocomplete Control in ASP.Net AutoComplete Component in Visualforce using JQueryUI In this article, we will be creating TypeAhead Directive (Auto Complete) again in Salesforce However this time we will use AngularJs. Why we are using AngularJS ? We\u2026","rel":"","context":"In &quot;Salesforce&quot;","block_context":{"text":"Salesforce","link":"https:\/\/www.jitendrazaa.com\/blog\/category\/salesforce\/"},"img":{"alt_text":"TypeAhead Demo using AngularJs","src":"https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2014\/07\/TypeAhead-Demo-using-AngularJs.png?resize=350%2C200&ssl=1","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2014\/07\/TypeAhead-Demo-using-AngularJs.png?resize=350%2C200&ssl=1 1x, https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2014\/07\/TypeAhead-Demo-using-AngularJs.png?resize=525%2C300&ssl=1 1.5x, https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2014\/07\/TypeAhead-Demo-using-AngularJs.png?resize=700%2C400&ssl=1 2x"},"classes":[]},{"id":2817,"url":"https:\/\/www.jitendrazaa.com\/blog\/salesforce\/gantt-chart-in-salesforce-using-jquery-and-json\/","url_meta":{"origin":3347,"position":1},"title":"Gantt Chart in Salesforce using JQuery and JSON","author":"Jitendra","date":"April 18, 2012","format":false,"excerpt":"Tutorial and Example of creating the Gantt Chart in Salesforce using JQuery and JSON","rel":"","context":"In &quot;Apex&quot;","block_context":{"text":"Apex","link":"https:\/\/www.jitendrazaa.com\/blog\/category\/salesforce\/apex\/"},"img":{"alt_text":"Gantt Chart in Salesforce","src":"https:\/\/i0.wp.com\/jitendrazaa.com\/blog\/wp-content\/uploads\/2012\/04\/Gantt-Chart-in-Salesforce.png?resize=350%2C200&ssl=1","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/jitendrazaa.com\/blog\/wp-content\/uploads\/2012\/04\/Gantt-Chart-in-Salesforce.png?resize=350%2C200&ssl=1 1x, https:\/\/i0.wp.com\/jitendrazaa.com\/blog\/wp-content\/uploads\/2012\/04\/Gantt-Chart-in-Salesforce.png?resize=525%2C300&ssl=1 1.5x"},"classes":[]},{"id":4618,"url":"https:\/\/www.jitendrazaa.com\/blog\/salesforce\/most-frequently-used-code-snippets-for-salesforce-developers-faq-part-21\/","url_meta":{"origin":3347,"position":2},"title":"Salesforce Developers interview questions &#8211; Most commonly used code snippets &#8211; part 21","author":"Jitendra","date":"July 7, 2015","format":false,"excerpt":"Salesforce interview questions - Most frequently used Apex and visualforce code used by Salesforce developers like \"How to query and abort scheduled job using Apex\", \"Defining VF page as HTML5\", \"Visualforce page as JSON\" , \"Handling colon in element Id for Jquery\" , \"Chatter using Apex\" and many more.","rel":"","context":"In &quot;Salesforce&quot;","block_context":{"text":"Salesforce","link":"https:\/\/www.jitendrazaa.com\/blog\/category\/salesforce\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":1527,"url":"https:\/\/www.jitendrazaa.com\/blog\/microsoft\/net\/ajax-based-multiselect-jquery-autocomplete-control-in-asp-net\/","url_meta":{"origin":3347,"position":3},"title":"Ajax Based Multiselect JQuery Autocomplete Control in ASP.Net","author":"Jitendra","date":"February 19, 2011","format":false,"excerpt":"Tutorial on creating Ajax Based Multiselect JQuery Autocomplete User Control in ASP.Net","rel":"","context":"In &quot;ASP.NET&quot;","block_context":{"text":"ASP.NET","link":"https:\/\/www.jitendrazaa.com\/blog\/category\/microsoft\/net\/"},"img":{"alt_text":"Ajax Based Multiselect JQuery Autocomplete Control in ASP.Net","src":"https:\/\/i0.wp.com\/jitendrazaa.com\/blog\/wp-content\/uploads\/2011\/02\/Ajax-Based-Multiselect-JQuery-Autocomplete-Control-in-ASP.Net_.png?resize=350%2C200&ssl=1","width":350,"height":200},"classes":[]},{"id":3762,"url":"https:\/\/www.jitendrazaa.com\/blog\/salesforce\/salesforce-rest-api-playground\/","url_meta":{"origin":3347,"position":4},"title":"Salesforce REST API Playground","author":"Jitendra Zaa","date":"February 25, 2014","format":false,"excerpt":"What is REST API ? In my words, Getting data from Other System or Same System using HTTP request is known as REST API. If you know, how website works, you know REST API. Before REST API, there was SOAP request which needed lots of configuration and very tightly coupled.\u2026","rel":"","context":"In &quot;Salesforce&quot;","block_context":{"text":"Salesforce","link":"https:\/\/www.jitendrazaa.com\/blog\/category\/salesforce\/"},"img":{"alt_text":"REST API playground in Salesforce","src":"https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2014\/02\/REST-API-playground-in-Salesforce-1024x362.png?resize=350%2C200&ssl=1","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2014\/02\/REST-API-playground-in-Salesforce-1024x362.png?resize=350%2C200&ssl=1 1x, https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2014\/02\/REST-API-playground-in-Salesforce-1024x362.png?resize=525%2C300&ssl=1 1.5x"},"classes":[]},{"id":2808,"url":"https:\/\/www.jitendrazaa.com\/blog\/salesforce\/json-output-in-visualforce\/","url_meta":{"origin":3347,"position":5},"title":"JSON output in Visualforce","author":"Jitendra","date":"April 18, 2012","format":false,"excerpt":"The Example of generating the JSON Output in Visualforce page using JSON.serialize method provided by Salesforce","rel":"","context":"In &quot;Apex&quot;","block_context":{"text":"Apex","link":"https:\/\/www.jitendrazaa.com\/blog\/category\/salesforce\/apex\/"},"img":{"alt_text":"Visualforce page output as JSON","src":"https:\/\/i0.wp.com\/jitendrazaa.com\/blog\/wp-content\/uploads\/2012\/04\/Visualforce-page-output-as-JSON.png?resize=350%2C200&ssl=1","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/jitendrazaa.com\/blog\/wp-content\/uploads\/2012\/04\/Visualforce-page-output-as-JSON.png?resize=350%2C200&ssl=1 1x, https:\/\/i0.wp.com\/jitendrazaa.com\/blog\/wp-content\/uploads\/2012\/04\/Visualforce-page-output-as-JSON.png?resize=525%2C300&ssl=1 1.5x"},"classes":[]}],"jetpack_likes_enabled":true,"_links":{"self":[{"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/posts\/3347","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/comments?post=3347"}],"version-history":[{"count":4,"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/posts\/3347\/revisions"}],"predecessor-version":[{"id":3803,"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/posts\/3347\/revisions\/3803"}],"wp:attachment":[{"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/media?parent=3347"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/categories?post=3347"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/tags?post=3347"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}