{"id":3917,"date":"2014-07-15T00:32:46","date_gmt":"2014-07-15T00:32:46","guid":{"rendered":"http:\/\/www.jitendrazaa.com\/blog\/?p=3917"},"modified":"2014-07-15T13:27:59","modified_gmt":"2014-07-15T13:27:59","slug":"ajax-based-autocomplete-typeahead-directive-in-angularjs","status":"publish","type":"post","link":"https:\/\/www.jitendrazaa.com\/blog\/salesforce\/ajax-based-autocomplete-typeahead-directive-in-angularjs\/","title":{"rendered":"Ajax based AutoComplete \/ TypeAhead Directive in AngularJS"},"content":{"rendered":"<p>Previously we already discussed below Auto Complete components:<\/p>\n<ol>\n<li><a title=\"Ajax Based AutoComplete using JQuery and JQueryUI\" href=\"https:\/\/www.jitendrazaa.com\/blog\/microsoft\/net\/ajax-based-multiselect-jquery-autocomplete-control-in-asp-net\/\">Ajax Based Multiselect JQuery Autocomplete Control in ASP.Net<\/a><\/li>\n<li><a title=\"AutoComplete Component in Visualforce using JQueryUI\" href=\"https:\/\/www.jitendrazaa.com\/blog\/salesforce\/ajax-based-autocomplete-component-in-salesforce-using-jquery-ui-and-json\/\">AutoComplete Component in Visualforce using JQueryUI<\/a><\/li>\n<\/ol>\n<p style=\"text-align: justify;\">In this article, we will be creating TypeAhead Directive (Auto Complete) again in Salesforce However this time we will use AngularJs. <a title=\"Why we need AngularJs\" href=\"https:\/\/www.jitendrazaa.com\/blog\/webtech\/web\/getting-started-with-angularjs\/\">Why we are using AngularJS ? <\/a>We discussed already in one of article.<\/p>\n<p><strong>Getting Remote Data in JSON format using AJAX from:<\/strong><\/p>\n<p style=\"text-align: justify;\">To get data from remote source, we are using same code &#8220;Visualforce Account_JSON&#8221; and &#8220;Controller AccountJSONCreator &#8221; <a title=\"AutoComplete Component in Visualforce using JQueryUI\" href=\"https:\/\/www.jitendrazaa.com\/blog\/salesforce\/ajax-based-autocomplete-component-in-salesforce-using-jquery-ui-and-json\/\">explained in this article<\/a>. Only thing I have added in wrapper class is ID field.<\/p>\n<p>Other than <a title=\"AngularJs\" href=\"https:\/\/angularjs.org\/\">AngularJs<\/a>, we are also using <a title=\"BootStrap\" href=\"http:\/\/getbootstrap.com\/\">Bootstrap <\/a>in this article to make slick UI.<\/p>\n<figure id=\"attachment_3922\" aria-describedby=\"caption-attachment-3922\" style=\"width: 756px\" class=\"wp-caption alignnone\"><a href=\"https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2014\/07\/TypeAhead-Demo-using-AngularJs.png?ssl=1\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-3922\" src=\"https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2014\/07\/TypeAhead-Demo-using-AngularJs.png?resize=756%2C316&#038;ssl=1\" alt=\"TypeAhead Demo using AngularJs\" width=\"756\" height=\"316\" srcset=\"https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2014\/07\/TypeAhead-Demo-using-AngularJs.png?w=756&amp;ssl=1 756w, https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2014\/07\/TypeAhead-Demo-using-AngularJs.png?resize=300%2C125&amp;ssl=1 300w, https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2014\/07\/TypeAhead-Demo-using-AngularJs.png?resize=624%2C260&amp;ssl=1 624w\" sizes=\"auto, (max-width: 756px) 100vw, 756px\" \/><\/a><figcaption id=\"caption-attachment-3922\" class=\"wp-caption-text\">TypeAhead Demo using AngularJs<\/figcaption><\/figure>\n<p><strong>Angular Directive :<\/strong><\/p>\n<p style=\"text-align: justify;\">Directive is great way of declaring your own component and re-use throughout page. write once and re-use every where. Our directive will look like :<!--more--><\/p>\n<pre class=\"brush: xml; title: ; notranslate\" title=\"\">\r\n&lt;typeahead\r\ntitle=&quot;AccName&quot; subtitle=&quot;BillingCity&quot;\r\ndisplaykey=&quot;AccName&quot; retkey=&quot;AccId&quot;\r\nmodelret=&quot;valRet&quot; modeldisplay=&quot;valDis&quot; \/&gt;\r\n<\/pre>\n<p><span style=\"text-decoration: underline;\">typeAhead<\/span> &#8211; Name of Directive<br \/>\n<span style=\"text-decoration: underline;\">title<\/span> &#8211; After Ajax, value from JSON to display in first line<br \/>\n<span style=\"text-decoration: underline;\">subtitle<\/span> &#8211; After Ajax, value from JSON to display in second\u00a0line<br \/>\n<span style=\"text-decoration: underline;\">displaykey<\/span> &#8211; When item is selected, which JSON attribute to display (Most of time same as title)<br \/>\n<span style=\"text-decoration: underline;\">retkey<\/span> &#8211; After Selecting value, what should be stored hidden (Something like ID)<br \/>\n<span style=\"text-decoration: underline;\">modelret<\/span> &#8211; Hidden field value returned by directive<br \/>\n<span style=\"text-decoration: underline;\">modeldisplay<\/span> &#8211; selected value returned by directive<\/p>\n<p><strong>Live Demo :<\/strong><\/p>\n<p><iframe loading=\"lazy\" src=\"http:\/\/shivasoft-developer-edition.ap1.force.com\/Exp\/TypeAheadDemo\" width=\"100%\" height=\"300px\"><br \/>\n<\/iframe><\/p>\n<p><span style=\"text-decoration: underline;\"><strong>Complete Code :<\/strong><\/span><\/p>\n<p><strong>Visualforce TypeAheadDemo :<\/strong><\/p>\n<pre class=\"brush: xml; title: ; notranslate\" title=\"\">\r\n&lt;apex:page showHeader=&quot;false&quot; sidebar=&quot;false&quot;&gt;\r\n&lt;apex:includeScript value=&quot;{!$Resource.Angular}&quot;\/&gt;\r\n&lt;apex:stylesheet value=&quot;{!URLFOR($Resource.BootStrap3, 'bootstrap-3.1.1-dist\/css\/bootstrap.min.css')}&quot;\/&gt;\r\n\r\n&lt;div ng-app=&quot;app1&quot;&gt;\r\n        &lt;div class=&quot;well-lg well&quot;&gt;\r\n            &lt;h1&gt;  Type Ahead Example in AngularJs | Shivasoft  &lt;\/h1&gt;\r\n        &lt;\/div&gt;\r\n    &lt;div ng-controller=&quot;ItemCtrl&quot; class=&quot;container&quot;&gt; \r\n\r\n        Angular Lookup : &lt;div style=&quot;width:200px;&quot;&gt;\r\n                                    &lt;typeahead\r\n                                       title=&quot;AccName&quot; subtitle=&quot;BillingCity&quot;\r\n                                       displaykey=&quot;AccName&quot; retkey=&quot;AccId&quot;\r\n                                       modelret=&quot;valRet&quot; modeldisplay=&quot;valDis&quot;\r\n                                       \/&gt;\r\n                         &lt;\/div&gt; &lt;br \/&gt;\r\n                        &lt;b&gt; Value Selected&lt;\/b&gt;  {{valDis}}  &lt;br \/&gt;\r\n                        &lt;b&gt; Selected Id (Hidden) &lt;\/b&gt; {{valRet}}\r\n    &lt;\/div&gt;\r\n&lt;\/div&gt;\r\n\r\n&lt;script&gt;\r\n\r\nvar myApp = angular.module('app1',&#x5B;]); \r\n\r\n myApp.controller('ItemCtrl', &#x5B;'$scope','$templateCache','$http',  function($scope,$templateCache,$http) {\r\n\r\n }]);\r\n\r\n   myApp.directive('typeahead', function($timeout,$http) {\r\n  return {\r\n    restrict: 'AEC',\r\n    scope: {\r\n      title: '@',\r\n      retkey: '@',\r\n      displaykey:'@',\r\n      modeldisplay:'=',\r\n      subtitle: '@',\r\n      modelret: '='\r\n    },\r\n\r\n    link: function(scope, elem, attrs) {\r\n        scope.current = 0;\r\n        scope.selected = false; \r\n\r\n      scope.da  = function(txt){\r\n          scope.ajaxClass = 'loadImage';\r\n          $http({method: 'Get', url: 'Account_JSON?AccName='+txt}).\r\n                success(function(data, status) {\r\n                  scope.TypeAheadData = data;\r\n                  scope.ajaxClass = '';\r\n                }) ;  \r\n\r\n      }\r\n\r\n      scope.handleSelection = function(key,val) {\r\n        scope.modelret = key;\r\n        scope.modeldisplay = val;\r\n        scope.current = 0;\r\n        scope.selected = true;\r\n      }\r\n\r\n      scope.isCurrent = function(index) {\r\n        return scope.current == index;\r\n      }\r\n\r\n      scope.setCurrent = function(index) {\r\n        scope.current = index;\r\n      }\r\n\r\n    },\r\n    template: '&lt;input type=&quot;text&quot; ng-model=&quot;modeldisplay&quot; ng-KeyPress=&quot;da(modeldisplay)&quot;  ng-keydown=&quot;selected=false&quot;'+\r\n                'style=&quot;width:100%;&quot; ng-class=&quot;ajaxClass&quot;&gt;'+\r\n                '&lt;div class=&quot;list-group table-condensed overlap&quot; ng-hide=&quot;!modeldisplay.length || selected&quot; style=&quot;width:100%&quot;&gt;'+\r\n                    '&lt;a href=&quot;javascript:void();&quot; class=&quot;list-group-item noTopBottomPad&quot; ng-repeat=&quot;item in TypeAheadData|filter:model  track by $index&quot; '+\r\n                       'ng-click=&quot;handleSelection(item&#x5B;retkey],item&#x5B;displaykey])&quot; style=&quot;cursor:pointer&quot; '+\r\n                       'ng-class=&quot;{active:isCurrent($index)}&quot; '+\r\n                       'ng-mouseenter=&quot;setCurrent($index)&quot;&gt;'+\r\n                         ' {{item&#x5B;title]}}&lt;br \/&gt;'+\r\n                         '&lt;i&gt;{{item&#x5B;subtitle]}} &lt;\/i&gt;'+\r\n                    '&lt;\/a&gt; '+\r\n                '&lt;\/div&gt;'+\r\n                '&lt;\/input&gt;'\r\n  };\r\n});\r\n\r\n&lt;\/script&gt;\r\n&lt;style&gt;\r\n     .noTopBottomPad\r\n            {\r\n                padding-top : 2px !important;\r\n                padding-bottom : 2px !important;\r\n            }\r\n        .overlap {position: absolute !important;\r\n                z-index: 900 !important; width: inherit  !important ;}\r\n        .loadImage { background: white url('{!URLFOR($Resource.AutoCompleteWithModal, 'AjaxLoad.gif')}') right center no-repeat; }\r\n\r\n&lt;\/style&gt;\r\n&lt;\/apex:page&gt;\r\n<\/pre>\n<p><strong>Visualforce Account_JSON (To Query and get data in JSON format) :<\/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), a.Id);\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,AccId;\r\n\r\n        public AccountWrapper(String aName, String bCountry, String bCity, String i)\r\n        {\r\n            AccName = aName;\r\n            BillingCountry = bCountry;\r\n            BillingCity = bCity;\r\n            AccId = i ;\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","protected":false},"excerpt":{"rendered":"<p>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 discussed already in one of [&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":[9,18],"tags":[33,35,44,136,336],"class_list":["post-3917","post","type-post","status-publish","format-standard","hentry","category-salesforce","category-visualforce","tag-ajax","tag-angularjs","tag-autocomplete","tag-json","tag-visualforce"],"jetpack_featured_media_url":"","jetpack_sharing_enabled":true,"jetpack-related-posts":[{"id":3347,"url":"https:\/\/www.jitendrazaa.com\/blog\/salesforce\/ajax-based-autocomplete-component-in-salesforce-using-jquery-ui-and-json\/","url_meta":{"origin":3917,"position":0},"title":"AutoComplete Component in Visualforce using JQueryUI","author":"Jitendra","date":"June 28, 2013","format":false,"excerpt":"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 \"AutoCompleteWithModal\"\u009d. This Static resource has all images, CSS and JQuery library needed to implement this\u2026","rel":"","context":"In &quot;HTML&quot;","block_context":{"text":"HTML","link":"https:\/\/www.jitendrazaa.com\/blog\/category\/webtech\/web\/"},"img":{"alt_text":"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=350%2C200&ssl=1","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/jitendrazaa.com\/blog\/wp-content\/uploads\/2013\/06\/JQuery-UI-and-JSON-based-AJAX-AutoComplete-Component-in-Salesforce.png?resize=350%2C200&ssl=1 1x, https:\/\/i0.wp.com\/jitendrazaa.com\/blog\/wp-content\/uploads\/2013\/06\/JQuery-UI-and-JSON-based-AJAX-AutoComplete-Component-in-Salesforce.png?resize=525%2C300&ssl=1 1.5x"},"classes":[]},{"id":1527,"url":"https:\/\/www.jitendrazaa.com\/blog\/microsoft\/net\/ajax-based-multiselect-jquery-autocomplete-control-in-asp-net\/","url_meta":{"origin":3917,"position":1},"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":3745,"url":"https:\/\/www.jitendrazaa.com\/blog\/webtech\/web\/table-with-sorting-and-searching-using-angularjs\/","url_meta":{"origin":3917,"position":2},"title":"Table with Sorting and Searching using AngularJS","author":"Jitendra","date":"February 22, 2014","format":false,"excerpt":"I hope, from last article you got basic information about AngularJS. This time, I will demonstrate how to add basic Searching and Sorting capability to data table using AngularJs. Output will look something like this : Prerequisite Libraries : UnderscoreJs Bootstrap CSS AngularJs Complete Html Code : [html] <div ng-app=\"myApp\">\u2026","rel":"","context":"In &quot;HTML&quot;","block_context":{"text":"HTML","link":"https:\/\/www.jitendrazaa.com\/blog\/category\/webtech\/web\/"},"img":{"alt_text":"Searching and Sorting in Table using AngularJS","src":"https:\/\/i0.wp.com\/jitendrazaa.com\/blog\/wp-content\/uploads\/2014\/02\/Searching-and-Sorting-in-Table-using-AngularJS-300x128.png?resize=350%2C200&ssl=1","width":350,"height":200},"classes":[]},{"id":2470,"url":"https:\/\/www.jitendrazaa.com\/blog\/webtech\/salesforce-tutorial-create-simple-ajax-based-visualforce-page\/","url_meta":{"origin":3917,"position":3},"title":"Salesforce Tutorial &#8211; Create Simple Ajax based Visualforce page","author":"Jitendra","date":"October 17, 2011","format":false,"excerpt":"Salesforce Tutorial - Step by step tutorial to create AJAX based application in visualforce page with Apex class","rel":"","context":"In &quot;Web Technology&quot;","block_context":{"text":"Web Technology","link":"https:\/\/www.jitendrazaa.com\/blog\/category\/webtech\/"},"img":{"alt_text":"Simple AJAX demo in salesforce using visualforce","src":"https:\/\/i0.wp.com\/jitendrazaa.com\/blog\/wp-content\/uploads\/2011\/10\/Simple-AJAX-demo-in-salesforce-using-visualforce.png?resize=350%2C200&ssl=1","width":350,"height":200},"classes":[]},{"id":3751,"url":"https:\/\/www.jitendrazaa.com\/blog\/webtech\/web\/pagination-and-sorting-of-data-table-using-angularjs\/","url_meta":{"origin":3917,"position":4},"title":"Pagination, Searching and Sorting of Data Table  using AngularJS","author":"Jitendra Zaa","date":"February 22, 2014","format":false,"excerpt":"We have already discussed \"Basics of AngularJS\" and \"Simple Searching and Sorting\". In this article, we will add Pagination feature also to our previous example. What makes difficult is Sorting result when values are returned from Search and pagination is enabled. Unlike previous post we cannot use standard \"OrderBy\" filter\u2026","rel":"","context":"In &quot;HTML&quot;","block_context":{"text":"HTML","link":"https:\/\/www.jitendrazaa.com\/blog\/category\/webtech\/web\/"},"img":{"alt_text":"Searching Sorting and Pagination in Table using AngularJS","src":"https:\/\/i0.wp.com\/jitendrazaa.com\/blog\/wp-content\/uploads\/2014\/02\/Searching-Sorting-and-Pagination-in-Table-using-AngularJS-300x156.png?resize=350%2C200&ssl=1","width":350,"height":200},"classes":[]},{"id":4618,"url":"https:\/\/www.jitendrazaa.com\/blog\/salesforce\/most-frequently-used-code-snippets-for-salesforce-developers-faq-part-21\/","url_meta":{"origin":3917,"position":5},"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":[]}],"jetpack_likes_enabled":true,"_links":{"self":[{"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/posts\/3917","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=3917"}],"version-history":[{"count":7,"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/posts\/3917\/revisions"}],"predecessor-version":[{"id":3925,"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/posts\/3917\/revisions\/3925"}],"wp:attachment":[{"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/media?parent=3917"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/categories?post=3917"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/tags?post=3917"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}