HubSpot Autocomplete for Dropdown form fields

[louischausse]

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! 

[JRabidou]

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

[alyssamwilie]

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>

[cwh8944]

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!

[louischausse]

This is interesting!