{"id":2145,"date":"2015-12-12T14:21:58","date_gmt":"2015-12-12T08:51:58","guid":{"rendered":"https:\/\/www.inogic.com\/blog\/?p=2145"},"modified":"2026-02-03T11:04:46","modified_gmt":"2026-02-03T05:34:46","slug":"design-auto-complete-text-controls-in-dynamics-crm-2016","status":"publish","type":"post","link":"https:\/\/www.inogic.com\/blog\/2015\/12\/design-auto-complete-text-controls-in-dynamics-crm-2016\/","title":{"rendered":"Design Auto Complete Text controls in Dynamics CRM 2016"},"content":{"rendered":"

Introduction:<\/strong><\/p>\n

On Dec 1st<\/sup> Microsoft released another great version of Dynamics CRM \u2013 CRM 2016 that has loads of new features and not to forget developer enhancements too.<\/p>\n

One of the developer enhancements added to Dynamics CRM 2016 is “Auto Complete<\/strong>” which allows us to provide auto complete feature for the single line text fields.<\/p>\n

Configuring a control for Auto-Complete<\/strong><\/p>\n

Let us take an example to provide an auto complete list of cities for the City field on an entity.<\/p>\n

function listOfCities() {\r\n\r\n\u00a0\u00a0\u00a0 \/\/ List of sample cities names to suggest\r\n\r\n\u00a0\u00a0\u00a0 citites = [\r\n\r\n\u00a0\u00a0\u00a0 { name: 'Toronto', country: 'Canada', code: '001',a:'0' },\r\n\r\n\u00a0\u00a0\u00a0 { name: 'Aarhus', country: 'Denmark', code: '002' },\r\n\r\n\u00a0\u00a0\u00a0 { name: 'Cairo', country: 'Egypt', code: '003' },\r\n\r\n\u00a0\u00a0\u00a0 { name: 'Alexandria', country: 'Egypt', code: '004' },\r\n\r\n\u00a0\u00a0\u00a0 { name: 'Bavaria', country: 'Germany', code: '005' },\r\n\r\n\u00a0\u00a0\u00a0 { name: 'Baden-W\u00fcrttemberg', country: 'Germany', code: '006' },\r\n\r\n\u00a0\u00a0\u00a0 { name: 'Mumbai', country: 'India', code: '007' },\r\n\r\n\u00a0\u00a0\u00a0 { name: 'New Delhi', country: 'India', code: '008' },\r\n\r\n\u00a0\u00a0\u00a0 { name: 'Nashik', country: 'india', code: '009' },\r\n\r\n\u00a0\u00a0\u00a0 { name: 'Hai Phong', country: 'Vietnam', code: '0010' },\r\n\r\n\u00a0\u00a0\u00a0 { name: 'Ho Chi Minh', country: 'Vietnam', code: '0011' },\r\n\r\n\u00a0\u00a0\u00a0 { name: 'Mississauga', country: 'Canada', code: '0012' },\r\n\r\n\u00a0\u00a0\u00a0 ];\r\n\r\n\u00a0\u00a0\u00a0 var keyPressFcn = function (ext) {\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 try {\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 var userInput = Xrm.Page.getControl(\"address1_city\").getValue();\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 resultSet = {\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 results: new Array(),\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 commands: {\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 id: \"city\",\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 icon: \"..\/WebResources\/new_\/Images\/add.png\",\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \/\/This will add the Link at the bottom of the auto complete search result\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 label: \"New\",\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 action: function () {\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \/\/specify the action that you want to perform on click of New Link\u00a0\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 window.open(\"https:\/\/crmtrial12.crm5.dynamics.com\");\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 }\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 };\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 var userInputLowerCase = userInput.toLowerCase();\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 for (i = 0; i < citites.length; i++) {\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 if (userInputLowerCase === citites[i].name.substring(0, userInputLowerCase.length).toLowerCase()) {\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 resultSet.results.push({\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 id: i,\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 fields: [citites[i].name, citites[i].country, citites[i].code,],\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 icon: \"..\/WebResources\/new_\/Images\/add.png\"\r\n\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0});\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 }\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 if (resultSet.results.length >= 10) break;\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 }\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 if (resultSet.results.length > 0) {\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 ext.getEventSource().showAutoComplete(resultSet);\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 } else {\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 ext.getEventSource().hideAutoComplete();\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 }\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 } catch (e) {\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 console.log(e);\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 }\r\n\r\n\u00a0\u00a0\u00a0 };\r\n\r\n\u00a0\u00a0\u00a0 Xrm.Page.getControl(\"address1_city\").addOnKeyPress(keyPressFcn);\r\n\r\n}<\/pre>\n
In the above source code, we have used three newly added functions in CRM 2016.<\/p>\n
    \n
  1. showAutoComplete()<\/li>\n
  2. hideAutoComplete()<\/li>\n
  3. addOnKeyPress()<\/li>\n<\/ol>\n
      \n
    1. showAutoComplete()<\/strong><\/li>\n<\/ol>\n
      This function is use to show the drop down list based on the string entered by the user in the text box. In our example, if you type \u201cA\u201d in the text box then it will display all the cities starting with \u201cA\u201d as shown below.\"Design<\/a><\/p>\n
        \n
      1. hideAutoComplete()<\/strong><\/li>\n<\/ol>\n
        This function is use to hide the hide the drop down list. Or else you can simply click anywhere on the form then also this drop down list will get hide.<\/p>\n
          \n
        1. addOnKeyPress()<\/strong><\/li>\n<\/ol>\n
          This function is called whenever we type any character in the text box.<\/p>\n
          Xrm.Page.getControl(“address1_city”).addOnKeyPress(keyPressFcn);<\/p>\n
          So to make this Auto complete functionality work, we need to call the function on the form load as shown below. In this example, we have called \u201cListOfCities<\/strong>\u201d function on form load as shown below.<\/p>\n
          \"Design<\/a><\/p>\n
          Conclusion:<\/strong><\/p>\n
          With auto-complete feature becoming a part of our daily use on the web, this now helps us provide a quick lookup to possible allowed values, without requiring the field to be converted into a Lookup.<\/p>\n
          Just not this, before moving to the next post please visit\u00a0Maplytics<\/a> InfoCentre – Bing Maps Integration for Microsoft Dynamics CRM.<\/p>\n","protected":false},"excerpt":{"rendered":"
          Introduction: On Dec 1st Microsoft released another great version of Dynamics CRM \u2013 CRM 2016 that has loads of new features and not to forget developer enhancements too. One of the developer enhancements added to Dynamics CRM 2016 is “Auto Complete” which allows us to provide auto complete feature for the single line text fields.\u2026 Read More: Design Auto Complete Text controls in Dynamics CRM 2016 »<\/a><\/span><\/p>\n","protected":false},"author":13,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[11,16,24,25,33],"tags":[181],"class_list":["post-2145","post","type-post","status-publish","format-standard","hentry","category-controls","category-dynamics-365","category-dynamics-crm-2016","category-dynamics-crm-2016-update-1","category-javascript","tag-auto-complete-text-controls"],"aioseo_notices":[],"aioseo_head":"\n\t\t\n\t\n\t\n\t\n\t\n\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t