💬 RevOps Discussions

louischausse
Conseiller clé | Partenaire solutions Platinum
Conseiller clé | Partenaire solutions Platinum

HubSpot Autocomplete for Dropdown form fields

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! 

Louis Chaussé from Auxilio HubSpot Solutions Partner Signature
Louis Chaussé from Auxilio HubSpot Solutions Partner Meeting link
4 Réponses
JRabidou
Participant

HubSpot Autocomplete for Dropdown form fields

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

0 Votes
alyssamwilie
Expert reconnu | Partenaire solutions Elite
Expert reconnu | Partenaire solutions Elite

HubSpot Autocomplete for Dropdown form fields

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>

 

If this answer solved your question, please mark it as the solution.

Alyssa Wilie Profile Image

Alyssa Wilie

Web Developerat Lynton

Learn HubL | Get Marketing Insights

HubSpot Elite Solutions Partner
Lynton's HubSpot theme Rubric now available. Click to download.
cwh8944
Contributeur

HubSpot Autocomplete for Dropdown form fields

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!

0 Votes
louischausse
Conseiller clé | Partenaire solutions Platinum
Conseiller clé | Partenaire solutions Platinum

HubSpot Autocomplete for Dropdown form fields

This is interesting!

Louis Chaussé from Auxilio HubSpot Solutions Partner Signature
Louis Chaussé from Auxilio HubSpot Solutions Partner Meeting link
0 Votes