Using typeahead on a HubSpot form

script.js

// include the following scripts that can be found here https://select2.org/getting-started/installation
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/select2.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/select2.min.js"></script>

// in the below, we listen for the form to load, then switch out the standard select element (by name) with a select2 element
<script>
  window.addEventListener('message', event => {
    if(event.data.type === 'hsFormCallback' && event.data.eventName === 'onFormReady') {
        // Initialize Select2 on the specified select element - update with the internal name of the property where it says internal_select_name
        const selectElement = $('select[name=internal_select_name]').select2();

        // Listen for the select2:select event to detect when a value is selected - then we hide the og select element
        selectElement.on('select2:select', function(e) {
            console.log("select2 value selected");

            // Log the selected data for confirmation
            const selectedData = e.params.data;
            console.log("Selected data:", selectedData);

            // Hide the target select element by name - replace the internal_select_name value with the internal name of your select property
            document.querySelector('select[name="internal_select_name"]').style.display = 'none';
        });
    }
  });
</script>