Use Single Line Text field as Autocomplete Input

Use a single line text field as autocomplete input and populate the single line text field with the full address.

Instructions

Code

Filename: gpaa-single-line-as-input.php

<?php
/**
 * Gravity Perks // Address Autocomplete // Use Single Line Text field as Autocomplete Input
 * https://gravitywiz.com/documentation/gravity-forms-address-autocomplete/
 *
 * Instruction Video: https://www.loom.com/share/2a8b9d546bf345cfa2e18294af0dbfdb
 *
 * Use a Single Line Text field as autocomplete input and populate the Single Line Text field with the full address.
 *
 * Note: This snippet will require the user to make a selection from the auto-suggested addresses.
 *
 * Plugin Name:  GP Address Autocomplete - Use Single Line Text field as Autocomplete Input
 * Plugin URI:   https://gravitywiz.com/documentation/gravity-forms-address-autocomplete/
 * Description:  Use a single line text field as autocomplete input and populate the single line text field with the full address.
 * Author:       Gravity Wiz
 * Version:      0.2
 * Author URI:   https://gravitywiz.com/
 */
class GPAA_Single_Line_Input {

	private $_args = array();

	public function __construct( $args = array() ) {

		$this->_args = wp_parse_args( $args, array(
			'form_id'              => false,
			'address_field_id'     => false,
			'single_line_field_id' => false,
		) );

		add_action( 'init', array( $this, 'init' ) );

	}

	public function init() {

		add_filter( 'gform_pre_render', array( $this, 'load_form_script' ), 10, 2 );
		add_filter( 'gform_register_init_scripts', array( $this, 'add_init_script' ), 10, 2 );
		add_filter( 'gpaa_init_args_' . $this->_args['form_id'] . '_' . $this->_args['address_field_id'], array( $this, 'add_gpaa_init' ), 10, 2 );

	}

	public function load_form_script( $form, $is_ajax_enabled ) {

		if ( $this->is_applicable_form( $form ) && ! has_action( 'wp_footer', array( $this, 'output_script' ) ) ) {
			add_action( 'wp_footer', array( $this, 'output_script' ) );
			add_action( 'gform_preview_footer', array( $this, 'output_script' ) );
		}

		return $form;
	}

	public function output_script() {
		?>

		<script type="text/javascript">

			( function( $ ) {
				window.GPAASingleLineInput = function( args ) {

					let $input = $('#input_' + args.formId + '_' + args.singleLineFieldId );

					gform.addFilter('gpaa_values', function (values, place, gpaa, formId, fieldId) {
						if ( args.formId == formId && args.addressFieldId == fieldId ) {
							if ( args.useFullAddress ) {
								// Logic borrowed from https://github.com/gravitywiz/snippet-library/pull/730
								var fullAddress     = gpaa.inputs.autocomplete.value;
								values.autocomplete = fullAddress;
								values.address1     = fullAddress.split(',')[0].trim();
							} else {
								values.autocomplete = place.formatted_address;
							}
							$input.data('gpaa-filled-value', place.formatted_address);
						}

						return values;
					});

					$input.on('blur', function () {
						var filledValue = $(this).data('gpaa-filled-value');
						if (!filledValue) {
							filledValue = '';
						}

						$(this).val(filledValue);
					})

				}
			} )( jQuery );

		</script>

		<?php
	}

	public function add_init_script( $form ) {

		if ( ! $this->is_applicable_form( $form ) ) {
			return;
		}

		$args = array(
			'formId'            => $this->_args['form_id'],
			'addressFieldId'    => $this->_args['address_field_id'],
			'singleLineFieldId' => $this->_args['single_line_field_id'],
			'useFullAddress'    => $this->_args['use_full_address'],
		);

		$script = 'new GPAASingleLineInput( ' . json_encode( $args ) . ' );';
		$slug   = implode( '_', array( 'gppa_single_line_input', $this->_args['form_id'], $this->_args['address_field_id'] ) );

		GFFormDisplay::add_init_script( $this->_args['form_id'], $slug, GFFormDisplay::ON_PAGE_RENDER, $script );

	}

	public function add_gpaa_init( $args ) {

		$args['inputSelectors']['autocomplete'] = '#input_' . $this->_args['form_id'] . '_' . $this->_args['single_line_field_id'];

		return $args;

	}

	public function is_applicable_form( $form ) {

		$form_id = isset( $form['id'] ) ? $form['id'] : $form;

		return empty( $this->_args['form_id'] ) || (int) $form_id == (int) $this->_args['form_id'];
	}

}

// Configuration
new GPAA_Single_Line_Input( array(
	'form_id'              => 123,     // The ID of your form.
	'address_field_id'     => 4,       // The ID of the Address field.
	'single_line_field_id' => 5,        // The ID of the Single Line Text field.
	// 'use_full_address'     => true,    // Uncomment to use the full street address if you don't want an abbreviated street address.
) );

Comments

  1. Aakash
    Aakash November 12, 2024 at 6:14 am

    Hi, I have added this Snippet to website set to run on all pages. On Gravity form We have set one as Single Line Text Field and Address Field. We have “enabled Google Address Autocomplete” on Address field. But it’s not working as video demonstration.

    Let me know if something I have missed.

    Reply
    1. Samuel Bassah
      Samuel Bassah Staff November 13, 2024 at 9:16 am

      Hi Aakash,

      Have you updated the snippet configuration which is at the bottom of the snippet with the respective IDs as commented? If you’ve already done that, and it’s still not working, please submit a ticket for this so we can take a closer look at the setup and assist you to get it working.

      Best,

Leave a Reply

Your email address will not be published. Required fields are marked *

  • Trouble installing this snippet? See our troubleshooting tips.
  • Need to include code? Create a gist and link to it in your comment.
  • Reporting a bug? Provide a URL where this issue can be recreated.

By commenting, I understand that I may receive emails related to Gravity Wiz and can unsubscribe at any time.