Add custom autocompleter support to Search component (https://github.com/woocommerce/woocommerce-admin/pull/4518)

* Add custom autocompleter support to Search component

* Throw error if Search autocompleter is missing or is of the wrong type

* Add custom Search autocompleter changelog entry

plugins/woocommerce-admin/packages/components/CHANGELOG.md

@@ -7,6 +7,7 @@
 - Fix `<AnimationSlider />` example code.
 - Add `<Plugins />` component for installation of plugins.
 - Removed use of `IconButton` in favor of `Button` component.
+- Add custom autocompleter support to `<Search />` component.
 
 ## Breaking Changes
 - Removed `SplitButton` because its not being used.

plugins/woocommerce-admin/packages/components/src/search/README.md

@@ -22,7 +22,8 @@ Name | Type | Default | Description
 `allowFreeTextSearch` | Boolean | `false` | Render additional options in the autocompleter to allow free text entering depending on the type
 `className` | String | `null` | Class name applied to parent div
 `onChange` | Function | `noop` | Function called when selected results change, passed result list
-`type` | One of: 'categories', 'countries', 'coupons', 'customers', 'downloadIps', 'emails', 'orders', 'products', 'taxes', 'usernames', 'variations' | `null` | (required) The object type to be used in searching
+`type` | One of: 'categories', 'countries', 'coupons', 'customers', 'downloadIps', 'emails', 'orders', 'products', 'taxes', 'usernames', 'variations', 'custom' | `null` | (required) The object type to be used in searching
+`autocompleter` | Completer | `null` | Custom [completer](https://github.com/WordPress/gutenberg/tree/master/packages/components/src/autocomplete#the-completer-interface) to be used in searching. Required when `type` is 'custom'
 `placeholder` | String | `null` | A placeholder for the search input
 `selected` | Array | `[]` | An array of objects describing selected values. If the label of the selected value is omitted, the Tag of that value will not be rendered inside the search box.
 `inlineTags` | Boolean | `false` | Render tags inside input, otherwise render below input

plugins/woocommerce-admin/packages/components/src/search/index.js

@@ -63,6 +63,16 @@ export class Search extends Component {
 				return usernames;
 			case 'variations':
 				return variations;
+			case 'custom':
+				if (
+					! this.props.autocompleter ||
+					typeof this.props.autocompleter !== 'object'
+				) {
+					throw new Error(
+						"Invalid autocompleter provided to Search component, it requires a completer object when using 'custom' type."
+					);
+				}
+				return this.props.autocompleter;
 			default:
 				return {};
 		}
@@ -200,7 +210,12 @@ Search.propTypes = {
 		'taxes',
 		'usernames',
 		'variations',
+		'custom',
 	] ).isRequired,
+	/**
+	 * The custom autocompleter to be used in searching when type is 'custom'
+	 */
+	autocompleter: PropTypes.object,
 	/**
 	 * A placeholder for the search input.
 	 */