Support custom options for autocomplete dropdown

classes/helpers/FrmAppHelper.php

@@ -1691,7 +1691,7 @@ public static function maybe_autocomplete_pages_options( $args ) {
 
 		$pages_count = wp_count_posts( $args['post_type'] );
 
-		if ( $pages_count->publish <= 50 ) {
+		if ( ! isset( $pages_count->publish ) || $pages_count->publish <= 50 ) {
 			self::wp_pages_dropdown( $args );
 			return;
 		}
@@ -1716,6 +1716,101 @@ class="frm_autocomplete_value_input"
 		<?php
 	}
 
+	/**
+	 * Maybe show an HTML select or autocomplete input based on the number of options.
+	 *
+	 * @since x.x
+	 *
+	 * @param array $args Args. See the method for details.
+	 */
+	public static function maybe_autocomplete_options( $args ) {
+		$defaults = array(
+			'truncate'                 => false,
+			'placeholder'              => ' ',
+			'name'                     => '',
+			'id'                       => '',
+			'selected'                 => '',
+			'source'                   => array(),
+			'dropdown_limit'           => 50,
+			'autocomplete_placeholder' => __( 'Select an option', 'formidable' ),
+			'value_key'                => 'value',
+			'label_key'                => 'label',
+		);
+
+		$args = wp_parse_args( $args, $defaults );
+
+		$html_attrs = array();
+		if ( ! empty( $args['name'] ) ) {
+			$html_attrs['name'] = $args['name'];
+		}
+
+		if ( ! empty( $args['id'] ) ) {
+			$html_attrs['id'] = $args['id'];
+		}
+
+		if ( count( $args['source'] ) <= $args['dropdown_limit'] ) {
+			?>
+			<select <?php self::array_to_html_params( $html_attrs, true ); ?>>
+				<option value=""><?php echo esc_html( $args['placeholder'] ); ?></option>
+				<?php
+				foreach ( $args['source'] as $key => $source ) :
+					$value_label = self::get_dropdown_value_and_label_from_option( $source, $key, $args );
+					if ( ! empty( $args['truncate'] ) ) {
+						$value_label['label'] = self::truncate( $value_label['label'], $args['truncate'] );
+					}
+					?>
+					<option value="<?php echo esc_attr( $value_label['value'] ); ?>" <?php selected( $value_label['value'], $args['selected'] ); ?>><?php echo esc_html( $value_label['label'] ); ?></option>
+				<?php endforeach; ?>
+			</select>
+			<?php
+		} else {
+			$options            = array();
+			$autocomplete_value = '';
+			foreach ( $args['source'] as $key => $source ) {
+				$value_label = self::get_dropdown_value_and_label_from_option( $source, $key, $args );
+
+				if ( $value_label['value'] === $args['selected'] ) {
+					$autocomplete_value = $value_label['label'];
+				}
+
+				$options[] = $value_label;
+			}
+
+			$html_attrs['type']  = 'hidden';
+			$html_attrs['class'] = 'frm_autocomplete_value_input';
+			$html_attrs['value'] = $args['selected'];
+			?>
+			<input type="text" class="frm-custom-search"
+				   data-source="<?php echo esc_attr( wp_json_encode( $options ) ); ?>"
+				   placeholder="<?php echo esc_attr( $args['autocomplete_placeholder'] ); ?>"
+				   value="<?php echo esc_attr( $autocomplete_value ); ?>" />
+			<input <?php self::array_to_html_params( $html_attrs, true ); ?> />
+			<?php
+		}//end if
+	}
+
+	/**
+	 * Gets dropdown value and label from autodropdown option.
+	 *
+	 * @since x.x
+	 *
+	 * @param array|string $option Autocomplete option.
+	 * @param string       $key    Array key of the option.
+	 * @param array        $args   See {@see FrmAppHelper::maybe_autocomplete_options()}.
+	 * @return array
+	 */
+	private static function get_dropdown_value_and_label_from_option( $option, $key, $args ) {
+		if ( is_array( $option ) ) {
+			$value = isset( $option[ $args['value_key'] ] ) ? $option[ $args['value_key'] ] : '';
+			$label = isset( $option[ $args['label_key'] ] ) ? $option[ $args['label_key'] ] : '';
+		} else {
+			$value = $key;
+			$label = $option;
+		}
+
+		return compact( 'value', 'label' );
+	}
+
 	/**
 	 * @param array  $args
 	 * @param string $page_id Deprecated.
@@ -1726,7 +1821,6 @@ public static function wp_pages_dropdown( $args = array(), $page_id = '', $trunc
 
 		$pages    = self::get_post_ids_and_titles( $args['post_type'] );
 		$selected = self::get_post_param( $args['field_name'], $args['page_id'], 'absint' );
-
 		?>
 		<select name="<?php echo esc_attr( $args['field_name'] ); ?>" id="<?php echo esc_attr( $args['field_name'] ); ?>" class="frm-pages-dropdown">
 			<option value=""><?php echo esc_html( $args['placeholder'] ); ?></option>

js/admin/dom.js

@@ -249,10 +249,11 @@
 	};
 
 	const autocomplete = {
-		initSelectionAutocomplete: function() {
+		initSelectionAutocomplete: function( container ) {
 			if ( jQuery.fn.autocomplete ) {
-				autocomplete.initAutocomplete( 'page' );
-				autocomplete.initAutocomplete( 'user' );
+				autocomplete.initAutocomplete( 'page', container );
+				autocomplete.initAutocomplete( 'user', container );
+				autocomplete.initAutocomplete( 'custom', container );
 			}
 		},
 		/**
@@ -278,10 +279,19 @@
 					urlParams += '&post_type=' + element.attr( 'data-post-type' );
 				}
 
+				let source = ajaxurl + urlParams;
+
+				if ( this.dataset.source ) {
+					const sourceData = JSON.parse( this.dataset.source );
+					if ( sourceData ) {
+						source = sourceData;
+					}
+				}
+
 				element.autocomplete({
 					delay: 100,
 					minLength: 0,
-					source: ajaxurl + urlParams,
+					source: source,
 					change: autocomplete.selectBlank,
 					select: autocomplete.completeSelectFromResults,
 					focus: () => false,
@@ -327,13 +337,27 @@
 		selectBlank: function( e, ui ) {
 			if ( ui.item === null ) {
 				this.nextElementSibling.value = '';
+
+				/**
+				 * Fires when an autocomplete value is cleared.
+				 *
+				 * @since x.x
+				 */
+				wp.hooks.doAction( 'frm_autocomplete_clear_value', e, ui, this );
 			}
 		},
 
 		completeSelectFromResults: function( e, ui ) {
 			e.preventDefault();
 			this.value = ui.item.value === '' ? '' : ui.item.label;
 			this.nextElementSibling.value = ui.item.value;
+
+			/**
+			 * Fires when an autocomplete item is selected.
+			 *
+			 * @since x.x
+			 */
+			wp.hooks.doAction( 'frm_autocomplete_select', e, ui, this );
 		}
 	};
 

js/formidable_admin.js

@@ -697,7 +697,7 @@ function frmAdminBuildJS() {
 						inside.html( html );
 						initiateMultiselect();
 						showInputIcon( '#' + cont.attr( 'id' ) );
-						frmDom.autocomplete.initAutocomplete( 'page', inside );
+						frmDom.autocomplete.initSelectionAutocomplete( inside );
 						jQuery( b ).trigger( 'frm-action-loaded' );
 
 						/**