HubSpot Autocomplete for Dropdown form fields

Data Hub đź’¬ RevOps Discussions
1

Hi!

Curious if anyone had already built an “autofill” form field like this https://www.w3schools.com/howto/howto_js_autocomplete.asp

Where the values in the array would be the options of an HS dropdown field OR an autofill field in any other way.

I was about to build something from scratch but was wondering if there is already a bit of code somewhere or a module in the marketplace.

Thanks!

2

Don’t know if this is quite what you’re looking for but we did an autofill utilizing Google’s places API. We created a regular HTML input to call the Google API to and then appended it to the field we wanted to use it on. Then we hid the original input field and used javascript to update that field whenever the value of the Google field changed.

<!-- Googel API Script -->
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=[API KEY]&libraries=places"></script>
<!-- Automcomplete Field -->
<input id="placeautocomplete" class="hs-input" type="text" value="" placeholder="Address">

<!--[if lte IE 8]>
<script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/v2-legacy.js"></script>
<![endif]-->
<script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/v2.js"></script>
<script>
 hbspt.forms.create({
 portalId: "",
 formId: "",
 onFormReady: function($form) {
 var input = document.getElementById('placeautocomplete'); // Our auto-complete HTML field
 var autocomplete = new google.maps.places.Autocomplete(input); // Call places auto-complete onto HTML field

 $('#placeautocomplete').appendTo('.hs_company'); // Append auto-complete to Hubspot field

 function fillInput() {
 $('.hs_field-to-autocomplete .input input').val($('#placeautocomplete').val()).change();
 }; // function to Hubspot field whenever auto-complete field is changed

 autocomplete.addListener('place_changed', fillInput); // add event listener for Google place_changed

 $('#placeautocomplete').on('input', function() {
 $('.hs_field-to-autocomplete .input input').val($('#placeautocomplete').val()).change();
 }) // change on input
	},
	css: ".hs_field-to-autocomplete .input input {display: none;}" // hide original Hubspot field
});
</script>

Moderator note: While this solution may not address the original poster’s specific situation, it could be helpful for other community members facing similar challenges.

3

This is interesting!

4

Is this available on external Forms? Right now, our Form has a dropdown that is ony able to select an options, without the functionality to search for an option, as well as autocomplete.

We use a matching internal Deal property that contains over 7000 options that we are looking to put on the form, but it will be unrealistic to have an end user sort through that many options for their selection.

Does this solution allow search as well as auto complete? And would this many options cause lagging when the dropdown is selected?

I am definitely interested in this solution.

Thanks!

5

Hey Louis,
Did you ever find a solution for this. Currently looking for the exact same functionality.