{"id":9898,"date":"2023-10-03T08:19:47","date_gmt":"2023-10-03T15:19:47","guid":{"rendered":"https:\/\/www.serviceobjects.com\/docs\/?page_id=9898"},"modified":"2025-08-20T10:50:59","modified_gmt":"2025-08-20T17:50:59","slug":"ac-quick-integration-guide-place-predict","status":"publish","type":"page","link":"https:\/\/www.serviceobjects.com\/docs\/dots-global-address-complete\/ac-quick-integration-guide-place-predict\/","title":{"rendered":"AC &#8211; Quick Integration Guide &#8211; Place Predict"},"content":{"rendered":"<div style=\"height:32px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n<nav aria-label=\"Quick Integration Guide Place Predict Navigation\">\n<ul>\n<li><a href=\"#AC-QuickIntegrationGuide-PlacePredict-IntegrationIntroduction\">Integration Introduction<\/a><\/li>\n<li><a href=\"#AC-QuickIntegrationGuide-PlacePredict-Step1-IncludeFiles\">Step 1 &#8211; Include Files<\/a><\/li>\n<li><a href=\"#AC-QuickIntegrationGuide-PlacePredict-Step2-MapFields\">Step 2 &#8211; Map Fields<\/a><\/li>\n<li><a href=\"#AC-QuickIntegrationGuide-PlacePredict-Step3-SetOptions\">Step 3 &#8211; Set Options<\/a><\/li>\n<\/ul>\n<\/nav>\n<section aria-labelledby=\"AC-QuickIntegrationGuide-PlacePredict-IntegrationIntroduction\">\n<h1 class=\"wp-block-heading\" id=\"AC-QuickIntegrationGuide-PlacePredict-IntegrationIntroduction\">Integration Introduction<br \/><\/h1>\n<ul class=\"is-style-no-bullets-indented-list\">\n<li>\n<article aria-label=\"Integration Introduction details\">\n                Integrating our DOTS Global Address Complete solution can now be completed with anyone familiar with HTML and JavaScript.&nbsp; We make the integration process so easy that almost anyone will be able to get it up and running in little time.&nbsp; Our solution is designed for web based technologies that can consume our JavaScript helper file.&nbsp; We have simplified the integration process down to three easy steps: Include our JavaScript and CSS in your application, field mapping and customization by setting options.&nbsp; This integration guide will take you through a typical HTML web form integration.<br \/>\n            <\/article>\n<\/li>\n<\/ul>\n<\/section>\n<section aria-labelledby=\"AC-QuickIntegrationGuide-PlacePredict-Step1-IncludeFiles\">\n<h1 class=\"wp-block-heading\" id=\"AC-QuickIntegrationGuide-PlacePredict-Step1-IncludeFiles\">Step 1 &#8211; Include Files<\/h1>\n<ul class=\"is-style-no-bullets-indented-list\">\n<li>\n<article aria-label=\"Step 1 include files explanation\">\n                The first thing to be done on the page you want to integrate Global Address Complete is to make a reference to the JavaScript and CSS files.&nbsp; The JavaScript will handle all the things that should happen under the hood of the field that the Global Address Complete is connected to for the type ahead solution. And, the CSS file will help with the formatting of the field.&nbsp; The CSS file is just as critical as the JavaScript file for integrating this solution.<br \/>\n            <\/article>\n<\/li>\n<\/ul>\n<div style=\"height:36px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n<ul class=\"is-style-no-bullets-indented-list\">\n<li>\n<article aria-label=\"Include CSS file details\">\n                Starting with the CSS file&nbsp;ACStyle.css, add it to the page using the link tag in the head section.<br \/>\n            <\/article>\n<\/li>\n<\/ul>\n<div style=\"height:36px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n<p>    <strong>HTML &#8211; Include CSS<\/strong><\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"html\" data-enlighter-linenumbers=\"false\">&lt;head>\r\n    &lt;link rel=\"stylesheet\" type=\"text\/css\" href=\"https:\/\/trial.serviceobjects.com\/Resources\/AC\/CSS\/ACStyle.css\" \/>\r\n    .\r\n    .\r\n    .\r\n&lt;\/head><\/pre>\n<div style=\"height:45px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n<ul class=\"is-style-no-bullets-indented-list\">\n<li>\n<article aria-label=\"Include JavaScript file details\">\n                For the JavaScript file&nbsp;ACScriptV1.02.js, add it using the script tag at the top inside the body.&nbsp; This is important because earlier versions do not have options for supporting place predict, only address suggestion.<br \/>\n            <\/article>\n<\/li>\n<\/ul>\n<div style=\"height:47px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n<p>    <strong>HTML &#8211; Include JavaScript<\/strong><\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"html\" data-enlighter-linenumbers=\"false\">&lt;body>\r\n    &lt;script type=\"text\/javascript\" src=\"https:\/\/trial.serviceobjects.com\/Resources\/AC\/JS\/ACScriptV1.04.js\">&lt;\/script>\r\n    .\r\n    .\r\n    .<\/pre>\n<\/section>\n<section aria-labelledby=\"AC-QuickIntegrationGuide-PlacePredict-Step2-MapFields\">\n<h1 class=\"wp-block-heading\" id=\"AC-QuickIntegrationGuide-PlacePredict-Step2-MapFields\">Step 2 &#8211; Map Fields<\/h1>\n<ul class=\"is-style-no-bullets-indented-list\">\n<li>\n<article aria-label=\"Step 2 mapping fields explanation\">\n                Step 2 involves mapping a field on the page to the corresponding field in the JavaScript file that we added in the previous step just as we did in the address type ahead solution.&nbsp; Again, we will be adding the mapping inside the script tag on the same HTML page that we have been working on but you are free to create a separate JavaScript file and add the mapping code there.&nbsp; If you do add it to a new JavaScript page, be sure to reference it in the HTML page the same way we did in step 1 when we referenced the ACScriptV1.02.js page.<br \/>\n            <\/article>\n<\/li>\n<li>\n<article aria-label=\"Step 2 difference explanation\">\n                The key difference here is that typical use of the place predict solution usually employs only one field for typing and the same field for populating the selected suggestion.&nbsp; In the address type ahead solution, you will often see more fields to get populated on the selection of an address.&nbsp; That does not mean you can\u2019t take advantage of all the data that comes back from a selection by any means.&nbsp; You can add more fields and populate them with various elements coming back from the selection.<br \/>\n            <\/article>\n<\/li>\n<li>\n<article aria-label=\"Example HTML input fields\">\n                &nbsp;Here is an example of an HTML section with the input fields on a typical web form.&nbsp; Make note of the ID value on the input tag because that will be used in the mapping part of the script tag.&nbsp;<br \/>\n            <\/article>\n<\/li>\n<\/ul>\n<div style=\"height:43px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n<p>    <strong>Input Fields to Map<\/strong><\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"html\" data-enlighter-linenumbers=\"false\">&lt;div id=\"sPlace\" class=\"AddressInputBlock\">\r\n    &lt;div id=\"lPlace2\" class=\"AddressLabels\">Place&lt;\/div>\r\n    &lt;input id=\"iPlace\" type=\"text\" class=\"AddressInputs\" \/>\r\n&lt;\/div><\/pre>\n<div style=\"height:38px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n<ul class=\"is-style-no-bullets-indented-list\">\n<li>\n<article aria-label=\"Mapping input field details\">\n                Now that we have made note of iPlace on the input tag we are ready to map.&nbsp; In the script tag, add the code below.&nbsp; Here we are mapping the iPlace input field to the searching mechanism in the referenced JavaScript.&nbsp; The HTL tag with iPlace is where the place suggestions will be displayed.&nbsp; iPlace will be mapped to Address1, this is not a typo, Address1 is used for both the standard address suggestion solution and the Place Predict solution.<br \/>\n            <\/article>\n<\/li>\n<\/ul>\n<div style=\"height:38px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n<p>    <strong>Field Mapping<\/strong><\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"html\" data-enlighter-linenumbers=\"false\">&lt;script>\r\n     var fields = [\r\n                { element: \"iPlace\", field: \"Address1\", mode: so.fieldMode.SEARCH | so.fieldMode.POPULATE }\r\n             ];\r\n&lt;\/script><\/pre>\n<\/section>\n<section aria-labelledby=\"AC-QuickIntegrationGuide-PlacePredict-Step3-SetOptions\">\n<h1 class=\"wp-block-heading\" id=\"AC-QuickIntegrationGuide-PlacePredict-Step3-SetOptions\">Step 3 &#8211; Set Options<\/h1>\n<ul class=\"is-style-no-bullets-indented-list\">\n<li>\n<article aria-label=\"Step 3 setting options explanation\">\n                In the final step is where you can customize how Global Address Complete works for your solution. Here we will continue where we left off in the last step and add the next lines of code after the ending bracket of the field assignment but still inside the script tag.&nbsp; To complete the setup, you will need to have a Custom Key and you will need to know if you are using trial key or live key.&nbsp; We will pass the Custom Key to the options variable and if we are using a trial key no additional options need to be set.&nbsp; If you were setting up for a live implementation adding isTrial: false would be needed in the options variable. Referencing the next screenshot, the options would look like this in that situation: var options = { key: CustomKey, isTrial: false, DoPlace: true, SearchType: &#8220;Locality&#8221; };.&nbsp; The other options to focus on here are&nbsp;<strong>DoPlace<\/strong>&nbsp;and&nbsp;<strong>SearchType<\/strong>.&nbsp; Setting DoPlace to true will set the component to do place predict suggestions instead of addresses.&nbsp; The SearchType will indicate what kind of place predict is desired.&nbsp; For example, maybe you just want your users to see cities.&nbsp; Currently there is only the one option to search on, Locality, and it will suggest city and town type of places but in the future there will be others like Point of Interest (POI), Thoroughfare and Admin Area for example.&nbsp; Having a typo on the SearchType option will lead to no suggestion populating in the dropdown, however, omitting the option all together will default in results associated to the Locality level SearchType.<br \/>\n            <\/article>\n<\/li>\n<\/ul>\n<div style=\"height:26px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n<p>    <strong>Setting Options<\/strong><\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"html\" data-enlighter-linenumbers=\"false\">var fields = [\r\n                { element: \"iPlace\", field: \"Address1\", mode: so.fieldMode.SEARCH | so.fieldMode.POPULATE }\r\n             ];\r\n \r\n \r\nvar CustomKey = \"XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX\";\r\nvar options = { key: CustomKey, DoPlace: true, SearchType: \"Locality\" };\r\nvar DOTSGlobalAddressComplete = new so.Address(fields, options);<\/pre>\n<div style=\"height:34px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n<ul class=\"is-style-no-bullets-indented-list\">\n<li>\n<article aria-label=\"Form activation details\">\n                Once you have the options set your form will now be activated to suggest addresses as you type.<br \/>\n            <\/article>\n<\/li>\n<\/ul>\n<\/section>\n","protected":false},"excerpt":{"rendered":"<p>Integration Introduction Step 1 &#8211; Include Files Step 2 &#8211; Map Fields Step 3 &#8211; Set Options Integration Introduction Integrating our DOTS Global Address Complete solution can now be completed with anyone familiar with HTML and JavaScript.&nbsp; We make the integration process so easy that almost anyone will be able to get it up and [&hellip;]<\/p>\n","protected":false},"author":21,"featured_media":0,"parent":2321,"menu_order":1,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-9898","page","type-page","status-publish","hentry"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.2 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>AC - Quick Integration Guide - Place Predict<\/title>\n<meta name=\"description\" content=\"Integration Introduction Step 1 - Include Files Step 2 - Map Fields Step 3 - Set Options Integration Introduction Integrating our DOTS Global Address\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.serviceobjects.com\/docs\/dots-global-address-complete\/ac-quick-integration-guide-place-predict\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"AC - Quick Integration Guide - Place Predict\" \/>\n<meta property=\"og:description\" content=\"Integration Introduction Step 1 - Include Files Step 2 - Map Fields Step 3 - Set Options Integration Introduction Integrating our DOTS Global Address\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.serviceobjects.com\/docs\/dots-global-address-complete\/ac-quick-integration-guide-place-predict\/\" \/>\n<meta property=\"og:site_name\" content=\"Service Objects | Contact, Phone, Email Verification | Data Quality Services\" \/>\n<meta property=\"article:modified_time\" content=\"2025-08-20T17:50:59+00:00\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"4 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.serviceobjects.com\/docs\/dots-global-address-complete\/ac-quick-integration-guide-place-predict\/\",\"url\":\"https:\/\/www.serviceobjects.com\/docs\/dots-global-address-complete\/ac-quick-integration-guide-place-predict\/\",\"name\":\"AC - Quick Integration Guide - Place Predict\",\"isPartOf\":{\"@id\":\"https:\/\/www.serviceobjects.com\/docs\/#website\"},\"datePublished\":\"2023-10-03T15:19:47+00:00\",\"dateModified\":\"2025-08-20T17:50:59+00:00\",\"description\":\"Integration Introduction Step 1 - Include Files Step 2 - Map Fields Step 3 - Set Options Integration Introduction Integrating our DOTS Global Address\",\"breadcrumb\":{\"@id\":\"https:\/\/www.serviceobjects.com\/docs\/dots-global-address-complete\/ac-quick-integration-guide-place-predict\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.serviceobjects.com\/docs\/dots-global-address-complete\/ac-quick-integration-guide-place-predict\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.serviceobjects.com\/docs\/dots-global-address-complete\/ac-quick-integration-guide-place-predict\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.serviceobjects.com\/docs\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"DOTS Global Address Complete\",\"item\":\"https:\/\/www.serviceobjects.com\/docs\/dots-global-address-complete\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"AC &#8211; Quick Integration Guide &#8211; Place Predict\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.serviceobjects.com\/docs\/#website\",\"url\":\"https:\/\/www.serviceobjects.com\/docs\/\",\"name\":\"Service Objects | Contact, Phone, Email Verification | Data Quality Services\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/www.serviceobjects.com\/docs\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.serviceobjects.com\/docs\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.serviceobjects.com\/docs\/#organization\",\"name\":\"Service Objects | Contact, Phone, Email Verification | Data Quality Services\",\"url\":\"https:\/\/www.serviceobjects.com\/docs\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.serviceobjects.com\/docs\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.serviceobjects.com\/docs\/wp-content\/uploads\/2022\/08\/SO-logo-2560px-transparent.png\",\"contentUrl\":\"https:\/\/www.serviceobjects.com\/docs\/wp-content\/uploads\/2022\/08\/SO-logo-2560px-transparent.png\",\"width\":2560,\"height\":1440,\"caption\":\"Service Objects | Contact, Phone, Email Verification | Data Quality Services\"},\"image\":{\"@id\":\"https:\/\/www.serviceobjects.com\/docs\/#\/schema\/logo\/image\/\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"AC - Quick Integration Guide - Place Predict","description":"Integration Introduction Step 1 - Include Files Step 2 - Map Fields Step 3 - Set Options Integration Introduction Integrating our DOTS Global Address","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.serviceobjects.com\/docs\/dots-global-address-complete\/ac-quick-integration-guide-place-predict\/","og_locale":"en_US","og_type":"article","og_title":"AC - Quick Integration Guide - Place Predict","og_description":"Integration Introduction Step 1 - Include Files Step 2 - Map Fields Step 3 - Set Options Integration Introduction Integrating our DOTS Global Address","og_url":"https:\/\/www.serviceobjects.com\/docs\/dots-global-address-complete\/ac-quick-integration-guide-place-predict\/","og_site_name":"Service Objects | Contact, Phone, Email Verification | Data Quality Services","article_modified_time":"2025-08-20T17:50:59+00:00","twitter_card":"summary_large_image","twitter_misc":{"Est. reading time":"4 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.serviceobjects.com\/docs\/dots-global-address-complete\/ac-quick-integration-guide-place-predict\/","url":"https:\/\/www.serviceobjects.com\/docs\/dots-global-address-complete\/ac-quick-integration-guide-place-predict\/","name":"AC - Quick Integration Guide - Place Predict","isPartOf":{"@id":"https:\/\/www.serviceobjects.com\/docs\/#website"},"datePublished":"2023-10-03T15:19:47+00:00","dateModified":"2025-08-20T17:50:59+00:00","description":"Integration Introduction Step 1 - Include Files Step 2 - Map Fields Step 3 - Set Options Integration Introduction Integrating our DOTS Global Address","breadcrumb":{"@id":"https:\/\/www.serviceobjects.com\/docs\/dots-global-address-complete\/ac-quick-integration-guide-place-predict\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.serviceobjects.com\/docs\/dots-global-address-complete\/ac-quick-integration-guide-place-predict\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.serviceobjects.com\/docs\/dots-global-address-complete\/ac-quick-integration-guide-place-predict\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.serviceobjects.com\/docs\/"},{"@type":"ListItem","position":2,"name":"DOTS Global Address Complete","item":"https:\/\/www.serviceobjects.com\/docs\/dots-global-address-complete\/"},{"@type":"ListItem","position":3,"name":"AC &#8211; Quick Integration Guide &#8211; Place Predict"}]},{"@type":"WebSite","@id":"https:\/\/www.serviceobjects.com\/docs\/#website","url":"https:\/\/www.serviceobjects.com\/docs\/","name":"Service Objects | Contact, Phone, Email Verification | Data Quality Services","description":"","publisher":{"@id":"https:\/\/www.serviceobjects.com\/docs\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.serviceobjects.com\/docs\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.serviceobjects.com\/docs\/#organization","name":"Service Objects | Contact, Phone, Email Verification | Data Quality Services","url":"https:\/\/www.serviceobjects.com\/docs\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.serviceobjects.com\/docs\/#\/schema\/logo\/image\/","url":"https:\/\/www.serviceobjects.com\/docs\/wp-content\/uploads\/2022\/08\/SO-logo-2560px-transparent.png","contentUrl":"https:\/\/www.serviceobjects.com\/docs\/wp-content\/uploads\/2022\/08\/SO-logo-2560px-transparent.png","width":2560,"height":1440,"caption":"Service Objects | Contact, Phone, Email Verification | Data Quality Services"},"image":{"@id":"https:\/\/www.serviceobjects.com\/docs\/#\/schema\/logo\/image\/"}}]}},"_links":{"self":[{"href":"https:\/\/www.serviceobjects.com\/docs\/wp-json\/wp\/v2\/pages\/9898","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.serviceobjects.com\/docs\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.serviceobjects.com\/docs\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.serviceobjects.com\/docs\/wp-json\/wp\/v2\/users\/21"}],"replies":[{"embeddable":true,"href":"https:\/\/www.serviceobjects.com\/docs\/wp-json\/wp\/v2\/comments?post=9898"}],"version-history":[{"count":4,"href":"https:\/\/www.serviceobjects.com\/docs\/wp-json\/wp\/v2\/pages\/9898\/revisions"}],"predecessor-version":[{"id":11515,"href":"https:\/\/www.serviceobjects.com\/docs\/wp-json\/wp\/v2\/pages\/9898\/revisions\/11515"}],"up":[{"embeddable":true,"href":"https:\/\/www.serviceobjects.com\/docs\/wp-json\/wp\/v2\/pages\/2321"}],"wp:attachment":[{"href":"https:\/\/www.serviceobjects.com\/docs\/wp-json\/wp\/v2\/media?parent=9898"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}