gutenbergdocs/reference-guides/filters/autocomplete-filters.md

自动补全

editor.Autocomplete.completers 过滤器用于扩展和覆盖区块所使用的自动补全程序列表。

@wordpress/block-editor 中的 Autocomplete 组件会应用此过滤器。@wordpress/components 包提供了基础的 Autocomplete 组件，但该组件不会应用此类过滤器。不过，区块通常应使用 @wordpress/block-editor 提供的组件。

示例

以下示例演示如何使用 editor.Autocomplete.completers 过滤器添加首字母缩写补全程序。你可以在 @wordpress/components 包中找到关于自动补全程序接口的完整文档。

// 我们的补全程序
const acronymCompleter = {
	name: 'acronyms',
	triggerPrefix: '::',
	options: [
		{ letters: 'FYI', expansion: '供您参考' },
		{ letters: 'AFAIK', expansion: '据我所知' },
		{ letters: 'IIRC', expansion: '如果我没记错' },
	],
	getOptionKeywords( { letters, expansion } ) {
		const expansionWords = expansion.split( /\s+/ );
		return [ letters, ...expansionWords ];
	},
	getOptionLabel: acronym => acronym.letters,
	getOptionCompletion: ( { letters, expansion } ) => (
		<abbr title={ expansion }>{ letters }</abbr>
	),
};

// 过滤器函数
function appendAcronymCompleter( completers, blockName ) {
	return blockName === 'my-plugin/foo' ?
		[ ...completers, acronymCompleter ] :
		completers;
}

// 添加过滤器
wp.hooks.addFilter(
	'editor.Autocomplete.completers',
	'my-plugin/autocompleters/acronym',
	appendAcronymCompleter
);