User autocomplete - use debounced search request

blocks/autocompleters/index.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { sortBy } from 'lodash';
+import { sortBy, debounce } from 'lodash';
 
 /**
  * Internal dependencies
@@ -102,9 +102,9 @@ export function blockAutocompleter( { onReplace } ) {
  * @returns {Completer} Completer object used by the Autocomplete component.
  */
 export function userAutocompleter() {
-	const getOptions = () => {
-		return ( new wp.api.collections.Users() ).fetch().then( ( users ) => {
-			return users.map( ( user ) => {
+	const performSearch = debounce( function( resolve, searchData ) {
+		new wp.api.collections.Users().fetch( searchData ).then( ( users ) => {
+			users = users.map( ( user ) => {
 				return {
 					value: user,
 					label: [
@@ -115,6 +115,14 @@ export function userAutocompleter() {
 					keywords: [ user.slug, user.name ],
 				};
 			} );
+			resolve( users );
+		} );
+	}, 250 );
+
+	const getOptions = ( search = false ) => {
+		const searchData = search ? { data: { search } } : null;
+		return new Promise( ( resolve ) => {
+			performSearch( resolve, searchData );
 		} );
 	};
 

components/autocomplete/index.js

@@ -221,9 +221,15 @@ export class Autocomplete extends Component {
 		}
 	}
 
-	loadOptions( index ) {
-		this.props.completers[ index ].getOptions().then( ( options ) => {
-			const keyedOptions = map( options, ( option, i ) => ( { ...option, key: index + '-' + i } ) );
+	/**
+	 * Load options for an autocompleter.
+	 *
+	 * @param  {int} index    The autocompleter index.
+	 * @param  {string} query The query, if any.
+	 */
+	loadOptions( index, query ) {
+		this.props.completers[ index ].getOptions( query ).then( ( options ) => {
+			const keyedOptions = map( options, ( option, i ) => ( { ...option, key: ( option.value.slug ? option.value.slug : index ) + '-' + i } ) );
 			const filteredOptions = filterOptions( this.state.search, keyedOptions );
 			const selectedIndex = filteredOptions.length === this.state.filteredOptions.length ? this.state.selectedIndex : 0;
 			this.setState( {
@@ -312,7 +318,7 @@ export class Autocomplete extends Component {
 	}
 
 	search( event ) {
-		const { open: wasOpen, suppress: wasSuppress } = this.state;
+		const { open: wasOpen, suppress: wasSuppress, query: wasQuery } = this.state;
 		const { completers } = this.props;
 		const container = event.target;
 		// ensure that the cursor location is unambiguous
@@ -324,8 +330,8 @@ export class Autocomplete extends Component {
 		const match = this.findMatch( container, cursor, completers, wasOpen );
 		const { open, query, range } = match || {};
 		// asynchronously load the options for the open completer
-		if ( open && ( ! wasOpen || open.idx !== wasOpen.idx ) ) {
-			this.loadOptions( open.idx );
+		if ( open && ( ! wasOpen || open.idx !== wasOpen.idx || query !== wasQuery ) ) {
+			this.loadOptions( open.idx, query );
 		}
 		// create a regular expression to filter the options
 		const search = open ? new RegExp( '(?:\\b|\\s|^)' + escapeRegExp( query ), 'i' ) : /./;