From 81207615b9598892aff30caba93daa7a992565f7 Mon Sep 17 00:00:00 2001
From: Jon Surrell <sirreal@users.noreply.github.com>
Date: Mon, 29 Jul 2024 11:08:44 +0200
Subject: [PATCH 1/8] Autocomplete script motules and modernize

- No jQuery
- Use Script Modules
- Use REST endpoint for request
---
 .../wporg-developer-2023/inc/autocomplete.php | 178 +++++++++++-------
 .../wporg-developer-2023/js/autocomplete.js   | 149 ++++++++++-----
 2 files changed, 209 insertions(+), 118 deletions(-)

diff --git a/source/wp-content/themes/wporg-developer-2023/inc/autocomplete.php b/source/wp-content/themes/wporg-developer-2023/inc/autocomplete.php
index 1b112e4ae..90fad0742 100644
--- a/source/wp-content/themes/wporg-developer-2023/inc/autocomplete.php
+++ b/source/wp-content/themes/wporg-developer-2023/inc/autocomplete.php
@@ -20,15 +20,38 @@ public function __construct() {
 	 * @access public
 	 */
 	public function init() {
-
-		add_action( 'wp_ajax_autocomplete', array( $this, 'autocomplete_data_update' ) );
-		add_action( 'wp_ajax_nopriv_autocomplete', array( $this, 'autocomplete_data_update' ) );
+		add_action(
+			'rest_api_init',
+			function () {
+				register_rest_route(
+					'wporg-developer/v1',
+					'/autocomplete',
+					array(
+						'methods'             => 'POST',
+						'callback'            => array( $this, 'autocomplete_rest_handler' ),
+						'permission_callback' => '__return_true',
+						'schema' => function () {
+							return array(
+								'html' => array(
+									'description' => 'The HTML to process.',
+									'type' => 'string',
+									'required' => true,
+								),
+								'quirksMode' => array(
+									'description' => 'Process the document in quirks mode.',
+									'type' => 'boolean',
+								),
+							);
+						},
+					)
+				);
+			}
+		);
 
 		// Enqueue scripts and styles.
 		add_action( 'wp_enqueue_scripts', array( $this, 'scripts_and_styles' ), 11 );
 	}
 
-
 	/**
 	 * Enqueues scripts and styles.
 	 *
@@ -37,97 +60,117 @@ public function init() {
 	public function scripts_and_styles() {
 
 		// Handbook searches don't have autocomplete.
-		if ( function_exists( 'wporg_is_handbook' ) && wporg_is_handbook() ) {
-			return;
-		}
-
-		wp_enqueue_style(
-			'awesomplete-css',
-			get_stylesheet_directory_uri() . '/stylesheets/awesomplete.css',
-			array(),
-			filemtime( dirname( __DIR__ ) . '/stylesheets/awesomplete.css' )
-		);
-		wp_enqueue_style(
-			'autocomplete-css',
-			get_stylesheet_directory_uri() . '/stylesheets/autocomplete.css',
-			array(),
-			filemtime( dirname( __DIR__ ) . '/stylesheets/autocomplete.css' )
-		);
-
-		wp_register_script(
+		/*if ( function_exists( 'wporg_is_handbook' ) && wporg_is_handbook() ) {*/
+		/*	return;*/
+		/*}*/
+		/**/
+		/*wp_enqueue_style(*/
+		/*	'awesomplete-css',*/
+		/*	get_stylesheet_directory_uri() . '/stylesheets/awesomplete.css',*/
+		/*	array(),*/
+		/*	filemtime( dirname( __DIR__ ) . '/stylesheets/awesomplete.css' )*/
+		/*);*/
+		/*wp_enqueue_style(*/
+		/*	'autocomplete-css',*/
+		/*	get_stylesheet_directory_uri() . '/stylesheets/autocomplete.css',*/
+		/*	array(),*/
+		/*	filemtime( dirname( __DIR__ ) . '/stylesheets/autocomplete.css' )*/
+		/*);*/
+		/**/
+
+		wp_enqueue_script(
 			'awesomplete',
 			get_stylesheet_directory_uri() . '/js/awesomplete.min.js',
 			array(),
 			filemtime( dirname( __DIR__ ) . '/js/awesomplete.min.js' ),
 			true
 		);
-		wp_enqueue_script( 'awesomplete' );
-
-		wp_register_script( 'autocomplete', get_stylesheet_directory_uri() . '/js/autocomplete.js', array( 'awesomplete' ), filemtime( dirname( __DIR__ ) . '/js/autocomplete.js' ), true );
-		wp_localize_script(
-			'autocomplete',
-			'autocomplete',
-			array(
-				'ajaxurl'   => admin_url( 'admin-ajax.php' ),
-				'nonce'     => wp_create_nonce( 'autocomplete_nonce' ),
-				'post_type' => get_post_type(),
-			)
+		wp_enqueue_script_module(
+			'@wporg-developer/autocomplete',
+			get_stylesheet_directory_uri() . '/js/autocomplete.js',
+			array(),
+			filemtime( get_stylesheet_directory() . '/js/autocomplete.js' ),
 		);
 
-		wp_enqueue_script( 'autocomplete' );
+		/*wp_register_script(*/
+		/*	'autocomplete',*/
+		/*	get_stylesheet_directory_uri() . '/js/autocomplete.js',*/
+		/*	array( 'awesomplete' ),*/
+		/*	filemtime( dirname( __DIR__ ) . '/js/autocomplete.js' ),*/
+		/*	true*/
+		/*);*/
+		/*wp_localize_script(*/
+		/*	'autocomplete',*/
+		/*	'autocomplete',*/
+		/*	array(*/
+		/*		'ajaxurl'   => admin_url( 'admin-ajax.php' ),*/
+		/*		'nonce'     => wp_create_nonce( 'autocomplete_nonce' ),*/
+		/*		'post_type' => get_post_type(),*/
+		/*	)*/
+		/*);*/
+
+		/*wp_enqueue_script( 'autocomplete' );*/
+
+		add_filter(
+			"script_module_data_@wporg-developer/autocomplete",
+			function ( $data ) {
+				return array_merge( $data, array(
+					'rest_url' => rest_url('wporg-developer/v1/autocomplete'),
+					'nonce'       => wp_create_nonce( 'wporg/autocomplete' ),
+					'post_type'   => get_post_type(),
+				) );
+			}
+		);
 	}
 
+	public function autocomplete_rest_handler( WP_REST_Request $request ) {
+		$req_json = $request->get_json_params();
 
-	/**
-	 * Handles AJAX updates for the autocomplete list.
-	 *
-	 * @access public
-	 *
-	 * @return string JSON data
-	 */
-	public function autocomplete_data_update() {
+		$nonce_ok = wp_verify_nonce( $req_json['nonce'], 'wporg/autocomplete' );
+		if ( ! $nonce_ok ) {
+			return new WP_REST_Response( array( 'error' => __( 'Invalid nonce' ) ), 403 );
+		}
 
-		check_ajax_referer( 'autocomplete_nonce', 'nonce' );
+		// No search query.
+		$req_search = $req_json['s'] ?? '';
+		if ( '' === $req_search ) {
+			return new WP_REST_Response(
+				array( 'error' => __( 'Missing or invalid "s" search.', 'wporg' ) ),
+				400
+			);
+		}
 
 		$parser_post_types = DevHub\get_parsed_post_types();
-		$defaults          = array(
-			's'         => '',
-			'posts'     => array(),
-		);
 
-		if ( ! ( isset( $_POST['data'] ) && $_POST['data'] ) ) {
-			wp_send_json_error( $defaults );
+		$req_post_types = $req_json['post_types'];
+		if ( ! is_array( $req_post_types ) ) {
+			$req_post_types = array();
+		} else {
+			$req_post_types = array_intersect( $parser_post_types, $req_post_types );
 		}
 
-		// Parse the search form fields.
-		wp_parse_str( $_POST['data'], $form_data );
-		$form_data = array_merge( $defaults, $form_data );
-
-		// No search query.
-		if ( empty( $form_data['s'] ) ) {
-			wp_send_json_error( $defaults );
+		if ( array() === $req_post_types ) {
+			$req_post_types = $parser_post_types;
 		}
 
-		$post_types = isset( $_POST['post_type'] ) && 'command' === $_POST['post_type'] ?
-			array( 'command' ) :
-			$parser_post_types;
-
 		$args = array(
 			'posts_per_page'       => -1,
-			'post_type'            => $post_types,
-			's'                    => $form_data['s'],
+			'post_type'            => $req_post_types,
+			's'                    => $req_search,
 			'orderby'              => '',
 			'search_orderby_title' => 1,
 			'order'                => 'ASC',
 			'_autocomplete_search' => true,
 		);
 
-		$search = get_posts( $args );
+		$search_result = get_posts( $args );
 
-		if ( ! empty( $search ) ) {
+		if ( empty( $search_result ) ) {
+			return new WP_REST_Response( null, 200 );
+		} else {
 			$post_types_function_like = array( 'wp-parser-function', 'wp-parser-method' );
 
-			foreach ( $search as $post ) {
+			foreach ( $search_result as $post ) {
 				$permalink = get_permalink( $post->ID );
 				$title     = $post->post_title;
 
@@ -139,13 +182,12 @@ public function autocomplete_data_update() {
 					$title = 'class ' . $title . ' {}';
 				}
 
-				$form_data['posts'][ $title ] = $permalink;
+				$request_data['posts'][ $title ] = $permalink;
 			}
 		}
 
-		wp_send_json_success( $form_data );
+		return new WP_REST_Response( $request_data, 200 );
 	}
-
 }
 
 $autocomplete = new DevHub_Search_Form_Autocomplete();
diff --git a/source/wp-content/themes/wporg-developer-2023/js/autocomplete.js b/source/wp-content/themes/wporg-developer-2023/js/autocomplete.js
index b99bd19a1..4132fdca8 100644
--- a/source/wp-content/themes/wporg-developer-2023/js/autocomplete.js
+++ b/source/wp-content/themes/wporg-developer-2023/js/autocomplete.js
@@ -5,26 +5,43 @@
  * https://leaverou.github.io/awesomplete/
  */
 
-( function( $ ) {
+function init() {
+	/** @type {string} */
+	const stringifiedData = document.getElementById(
+		'wp-script-module-data-@wporg-developer/autocomplete'
+	)?.textContent;
+
+	let data;
+	try {
+		data = JSON.parse( stringifiedData );
+	} catch {
+		// No data from server, nothing to do.
+		return;
+	}
+
+	if ( typeof window.Awesomplete === 'undefined' ) {
+		return;
+	}
 
-	if ( typeof autocomplete === 'undefined' ) {
+	const form = document.querySelector( '#wporg-search .wp-block-search' );
+	if ( ! form ) {
 		return;
 	}
 
-	var form = $( '#wporg-search .wp-block-search' );
-	if ( ! form.length ) {
+	/** @type {HTMLInputElement} */
+	const searchfield = form.querySelector( 'input[type="search"]' );
+	if ( ! searchfield ) {
 		return;
 	}
 
-	var	searchfield = $( 'input[type="search"]', form ),
-		processing = false,
+	let processing = false,
 		search = '',
 		autocompleteResults = {};
 
-	var awesome = new Awesomplete( searchfield.get( 0 ), {
+	const awesome = new Awesomplete( searchfield, {
 		maxItems: 9999,
 		minChars: 3,
-		filter: function( text, input ) {
+		filter: function ( text, input ) {
 			// Filter autocomplete matches
 
 			// Full match
@@ -34,15 +51,25 @@
 			}
 
 			// Replace - _ and whitespace with a single space
-			var _text = Awesomplete.$.regExpEscape( text.trim().toLowerCase().replace( /[\_\-\s]+/g, ' ' ) );
-			var _input = Awesomplete.$.regExpEscape( input.trim().toLowerCase().replace( /[\_\-\s]+/g, ' ' ) );
+			var _text = Awesomplete.$.regExpEscape(
+				text
+					.trim()
+					.toLowerCase()
+					.replace( /[\_\-\s]+/g, ' ' )
+			);
+			var _input = Awesomplete.$.regExpEscape(
+				input
+					.trim()
+					.toLowerCase()
+					.replace( /[\_\-\s]+/g, ' ' )
+			);
 
 			// Matches with with single spaces between words
 			if ( Awesomplete.FILTER_CONTAINS( _text, _input ) ) {
 				return true;
 			}
 
-			_input = _input.split( " " );
+			_input = _input.split( ' ' );
 			var words = _input.length;
 
 			if ( 1 >= words ) {
@@ -63,68 +90,90 @@
 
 			return false;
 		},
-		replace: function( text ) {
+		replace: function ( text ) {
 			searchfield.val( text );
 
 			if ( text in autocompleteResults ) {
 				window.location = autocompleteResults[ text ];
 			}
-		}
+		},
 	} );
 
 	// On input event for the search field.
-	searchfield.on( 'input.autocomplete', function( e ) {
-
-		// Update the autocomlete list: 
+	searchfield.addEventListener( 'input', function ( e ) {
+		// Update the autocomplete list:
 		//     if there are more than 2 characters
 		//     and it's not already processing an Ajax request
-		if ( !processing && $( this ).val().trim().length > 2 ) {
-			search = $( this ).val();
+		if ( ! processing && this.value.trim().length > 2 ) {
+			search = this.value;
 			autocomplete_update();
 		}
 	} );
 
+	console.log( data, searchfield );
 
 	/**
 	 * Updates the autocomplete list
 	 */
-	function autocomplete_update() {
-
+	async function autocomplete_update() {
 		processing = true;
 
-		var data = {
-			action: "autocomplete",
-			data: form.serialize(),
-			nonce: autocomplete.nonce,
-			post_type: autocomplete.post_type
-		};
+		const url = new URL( data.rest_url, document.location.href );
 
-		$.post( autocomplete.ajaxurl, data )
-			.done( function( response ) {
-
-				if ( typeof response.success === 'undefined' ) {
-					return false;
-				}
-
-				if ( typeof response.data === 'undefined' ) {
-					return false;
-				}
-
-				if ( response.success === true && Object.values( response.data.posts ).length ) {
-					autocompleteResults = response.data.posts;
+		const requestData = { s: '', post_types: [], nonce: data.nonce };
+		requestData.s = form.elements.namedItem( 's' )?.value ?? '';
+		for ( const postTypeEl of form.elements.namedItem( 'post_type[]' ) ) {
+			if ( postTypeEl.checked ) {
+				requestData.post_types.push( postTypeEl.value );
+			}
+		}
 
-					// Update the autocomplete list
-					awesome.list = Object.keys( response.data.posts );
-				}
-			} )
-			.always( function() {
-				processing = false;
+		console.log( requestData );
 
-				// Check if the search was updated during processing
-				if ( search !== searchfield.val() ) {
-					searchfield.trigger( "input.autocomplete" );
-				}
+		/** @type {Response} */
+		let response;
+		try {
+			response = await fetch( url, {
+				method: 'POST',
+				body: JSON.stringify( requestData ),
+				headers: { 'Content-Type': 'application/json' },
 			} );
+			if ( ! response.ok ) {
+				throw new Error( 'Response not OK' );
+			}
+			response = await response.json();
+		} finally {
+			processing = false;
+		}
+
+		console.log( response );
+
+		//$.post( autocomplete.ajaxurl, data )
+		//	.done( function ( response ) {
+		//		if ( typeof response.success === 'undefined' ) {
+		//			return false;
+		//		}
+		//
+		//		if ( typeof response.data === 'undefined' ) {
+		//			return false;
+		//		}
+		//
+		//		if ( response.success === true && Object.values( response.data.posts ).length ) {
+		//			autocompleteResults = response.data.posts;
+		//
+		//			// Update the autocomplete list
+		//			awesome.list = Object.keys( response.data.posts );
+		//		}
+		//	} )
+		//	.always( function () {
+		//		processing = false;
+		//
+		//		// Check if the search was updated during processing
+		//		if ( search !== searchfield.val() ) {
+		//			searchfield.trigger( 'input.autocomplete' );
+		//		}
+		//	} );
 	}
+}
 
-} )( jQuery );
\ No newline at end of file
+init();

From 2cb0f739acf819c7dac5203a28c1fa76a5e6a5c5 Mon Sep 17 00:00:00 2001
From: Jon Surrell <sirreal@users.noreply.github.com>
Date: Mon, 29 Jul 2024 11:54:54 +0200
Subject: [PATCH 2/8] Try using awesomplete

---
 .../wporg-developer-2023/inc/autocomplete.php |  2 +-
 .../wporg-developer-2023/js/autocomplete.js   | 58 ++++++-------------
 2 files changed, 20 insertions(+), 40 deletions(-)

diff --git a/source/wp-content/themes/wporg-developer-2023/inc/autocomplete.php b/source/wp-content/themes/wporg-developer-2023/inc/autocomplete.php
index 90fad0742..2b10119ce 100644
--- a/source/wp-content/themes/wporg-developer-2023/inc/autocomplete.php
+++ b/source/wp-content/themes/wporg-developer-2023/inc/autocomplete.php
@@ -132,7 +132,7 @@ public function autocomplete_rest_handler( WP_REST_Request $request ) {
 		}
 
 		// No search query.
-		$req_search = $req_json['s'] ?? '';
+		$req_search = $req_json['search'] ?? '';
 		if ( '' === $req_search ) {
 			return new WP_REST_Response(
 				array( 'error' => __( 'Missing or invalid "s" search.', 'wporg' ) ),
diff --git a/source/wp-content/themes/wporg-developer-2023/js/autocomplete.js b/source/wp-content/themes/wporg-developer-2023/js/autocomplete.js
index 4132fdca8..e64cf46eb 100644
--- a/source/wp-content/themes/wporg-developer-2023/js/autocomplete.js
+++ b/source/wp-content/themes/wporg-developer-2023/js/autocomplete.js
@@ -34,9 +34,9 @@ function init() {
 		return;
 	}
 
-	let processing = false,
-		search = '',
-		autocompleteResults = {};
+	let processing = false;
+	let search = '';
+	let autocompleteResults = new Map();
 
 	const awesome = new Awesomplete( searchfield, {
 		maxItems: 9999,
@@ -93,8 +93,8 @@ function init() {
 		replace: function ( text ) {
 			searchfield.val( text );
 
-			if ( text in autocompleteResults ) {
-				window.location = autocompleteResults[ text ];
+			if ( autocompleteResults.has( text ) ) {
+				window.location = autocompleteResults.get( text );
 			}
 		},
 	} );
@@ -110,8 +110,6 @@ function init() {
 		}
 	} );
 
-	console.log( data, searchfield );
-
 	/**
 	 * Updates the autocomplete list
 	 */
@@ -120,16 +118,17 @@ function init() {
 
 		const url = new URL( data.rest_url, document.location.href );
 
-		const requestData = { s: '', post_types: [], nonce: data.nonce };
-		requestData.s = form.elements.namedItem( 's' )?.value ?? '';
+		const requestData = {
+			search: form.elements.namedItem( 's' )?.value ?? '',
+			post_types: [],
+			nonce: data.nonce,
+		};
 		for ( const postTypeEl of form.elements.namedItem( 'post_type[]' ) ) {
 			if ( postTypeEl.checked ) {
 				requestData.post_types.push( postTypeEl.value );
 			}
 		}
 
-		console.log( requestData );
-
 		/** @type {Response} */
 		let response;
 		try {
@@ -139,40 +138,21 @@ function init() {
 				headers: { 'Content-Type': 'application/json' },
 			} );
 			if ( ! response.ok ) {
-				throw new Error( 'Response not OK' );
+				throw new Error( 'Bad response.' );
 			}
 			response = await response.json();
 		} finally {
 			processing = false;
 		}
 
-		console.log( response );
-
-		//$.post( autocomplete.ajaxurl, data )
-		//	.done( function ( response ) {
-		//		if ( typeof response.success === 'undefined' ) {
-		//			return false;
-		//		}
-		//
-		//		if ( typeof response.data === 'undefined' ) {
-		//			return false;
-		//		}
-		//
-		//		if ( response.success === true && Object.values( response.data.posts ).length ) {
-		//			autocompleteResults = response.data.posts;
-		//
-		//			// Update the autocomplete list
-		//			awesome.list = Object.keys( response.data.posts );
-		//		}
-		//	} )
-		//	.always( function () {
-		//		processing = false;
-		//
-		//		// Check if the search was updated during processing
-		//		if ( search !== searchfield.val() ) {
-		//			searchfield.trigger( 'input.autocomplete' );
-		//		}
-		//	} );
+		/** @type {Record<string,string>|undefined} */
+		const posts = response.posts;
+		if ( ! posts ) {
+			return;
+		}
+
+		autocompleteResults = new Map( Object.entries( posts ) );
+		awesome.list = Object.keys( posts );
 	}
 }
 

From f72adfffb60aeea10092190bb5c1d0a6cd51d70a Mon Sep 17 00:00:00 2001
From: Jon Surrell <sirreal@users.noreply.github.com>
Date: Mon, 29 Jul 2024 12:42:22 +0200
Subject: [PATCH 3/8] Migrate awesomplete to module

---
 .../wporg-developer-2023/inc/autocomplete.php |  13 +-
 .../wporg-developer-2023/js/awesomplete.js    | 553 ++++++++----------
 2 files changed, 263 insertions(+), 303 deletions(-)

diff --git a/source/wp-content/themes/wporg-developer-2023/inc/autocomplete.php b/source/wp-content/themes/wporg-developer-2023/inc/autocomplete.php
index 2b10119ce..ecc32217a 100644
--- a/source/wp-content/themes/wporg-developer-2023/inc/autocomplete.php
+++ b/source/wp-content/themes/wporg-developer-2023/inc/autocomplete.php
@@ -78,18 +78,17 @@ public function scripts_and_styles() {
 		/*);*/
 		/**/
 
-		wp_enqueue_script(
-			'awesomplete',
-			get_stylesheet_directory_uri() . '/js/awesomplete.min.js',
+		wp_register_script_module(
+			'@wporg-developer/awesomplete',
+			get_stylesheet_directory_uri() . '/js/awesomplete.js',
 			array(),
-			filemtime( dirname( __DIR__ ) . '/js/awesomplete.min.js' ),
-			true
+			filemtime( get_stylesheet_directory() . '/js/awesomplete.js' )
 		);
 		wp_enqueue_script_module(
 			'@wporg-developer/autocomplete',
 			get_stylesheet_directory_uri() . '/js/autocomplete.js',
-			array(),
-			filemtime( get_stylesheet_directory() . '/js/autocomplete.js' ),
+			array( array( 'id' => '@wporg-developer/awesomplete', 'type' => 'dynamic' ) ),
+			filemtime( get_stylesheet_directory() . '/js/autocomplete.js' )
 		);
 
 		/*wp_register_script(*/
diff --git a/source/wp-content/themes/wporg-developer-2023/js/awesomplete.js b/source/wp-content/themes/wporg-developer-2023/js/awesomplete.js
index a0eda9caf..5a58f0ccc 100644
--- a/source/wp-content/themes/wporg-developer-2023/js/awesomplete.js
+++ b/source/wp-content/themes/wporg-developer-2023/js/awesomplete.js
@@ -5,390 +5,351 @@
  * MIT license
  */
 
-(function () {
-
-var _ = function (input, o) {
-	var me = this;
-
-	// Setup
-
-	this.input = $(input);
-	this.input.setAttribute("autocomplete", "off");
-	this.input.setAttribute("aria-autocomplete", "list");
-
-	o = o || {};
-
-	configure.call(this, {
-		minChars: 2,
-		maxItems: 10,
-		autoFirst: false,
-		filter: _.FILTER_CONTAINS,
-		sort: _.SORT_BYLENGTH,
-		item: function (text, input) {
-			var html = input === '' ? text : text.replace(RegExp($.regExpEscape(input.trim()), "gi"), "<mark>$&</mark>");
-			return $.create("li", {
-				innerHTML: html,
-				"aria-selected": "false"
-			});
-		},
-		replace: function (text) {
-			this.input.value = text;
-		}
-	}, o);
-
-	this.index = -1;
-
-	// Create necessary elements
-
-	this.container = $.create("div", {
-		className: "awesomplete",
-		around: input
-	});
-
-	this.ul = $.create("ul", {
-		hidden: "hidden",
-		inside: this.container
-	});
-
-	this.status = $.create("span", {
-		className: "visually-hidden",
-		role: "status",
-		"aria-live": "assertive",
-		"aria-relevant": "additions",
-		inside: this.container
-	});
-
-	// Bind events
-
-	$.bind(this.input, {
-		"input": this.evaluate.bind(this),
-		"blur": this.close.bind(this),
-		"keydown": function(evt) {
-			var c = evt.keyCode;
-
-			// If the dropdown `ul` is in view, then act on keydown for the following keys:
-			// Enter / Esc / Up / Down
-			if(me.opened) {
-				if (c === 13 && me.selected) { // Enter
-					evt.preventDefault();
-					me.select();
-				}
-				else if (c === 27) { // Esc
-					me.close();
-				}
-				else if (c === 38 || c === 40) { // Down/Up arrow
-					evt.preventDefault();
-					me[c === 38? "previous" : "next"]();
-				}
-			}
-		}
-	});
+const slice = Array.prototype.slice;
 
-	$.bind(this.input.form, {"submit": this.close.bind(this)});
+export class Awesomplete {
+	static all = [];
 
-	$.bind(this.ul, {"mousedown": function(evt) {
-		var li = evt.target;
-
-		if (li !== this) {
+	static FILTER_CONTAINS( text, input ) {
+		return RegExp( Awesomplete.$.regExpEscape( input.trim() ), 'i' ).test( text );
+	}
 
-			while (li && !/li/i.test(li.nodeName)) {
-				li = li.parentNode;
-			}
+	static FILTER_STARTSWITH( text, input ) {
+		return RegExp( '^' + Awesomplete.$.regExpEscape( input.trim() ), 'i' ).test( text );
+	}
 
-			if (li && evt.button === 0) {  // Only select on left click
-				evt.preventDefault();
-				me.select(li, evt);
-			}
+	static SORT_BYLENGTH( a, b ) {
+		if ( a.length !== b.length ) {
+			return a.length - b.length;
 		}
-	}});
 
-	if (this.input.hasAttribute("list")) {
-		this.list = "#" + this.input.getAttribute("list");
-		this.input.removeAttribute("list");
+		return a < b ? -1 : 1;
 	}
-	else {
-		this.list = this.input.getAttribute("data-list") || o.list || [];
+
+	// eslint-disable-next-line id-length
+	static $( expr, con ) {
+		return typeof expr === 'string' ? ( con || document ).querySelector( expr ) : expr || null;
 	}
 
-	_.all.push(this);
-};
+	// eslint-disable-next-line id-length
+	static $$( expr, con ) {
+		return slice.call( ( con || document ).querySelectorAll( expr ) );
+	}
 
-_.prototype = {
-	set list(list) {
-		if (Array.isArray(list)) {
-			this._list = list;
+	constructor( input, opts = {} ) {
+		// eslint-disable-next-line id-length
+		const me = this;
+
+		// Setup
+		this.input = Awesomplete.$( input );
+		this.input.setAttribute( 'autocomplete', 'off' );
+		this.input.setAttribute( 'aria-autocomplete', 'list' );
+
+		this.configure(
+			{
+				minChars: 2,
+				maxItems: 10,
+				autoFirst: false,
+				filter: Awesomplete.FILTER_CONTAINS,
+				sort: Awesomplete.SORT_BYLENGTH,
+				item: function ( text, itemInput ) {
+					const html =
+						itemInput === ''
+							? text
+							: text.replace(
+									RegExp( Awesomplete.$.regExpEscape( itemInput.trim() ), 'gi' ),
+									'<mark>$&</mark>'
+							  );
+					return Awesomplete.$.create( 'li', {
+						innerHTML: html,
+						'aria-selected': 'false',
+					} );
+				},
+				replace: function ( text ) {
+					this.input.value = text;
+				},
+			},
+			opts
+		);
+
+		this.index = -1;
+
+		// Create necessary elements
+
+		this.container = Awesomplete.$.create( 'div', {
+			className: 'awesomplete',
+			around: input,
+		} );
+
+		// eslint-disable-next-line id-length
+		this.ul = Awesomplete.$.create( 'ul', {
+			hidden: 'hidden',
+			inside: this.container,
+		} );
+
+		this.status = Awesomplete.$.create( 'span', {
+			className: 'visually-hidden',
+			role: 'status',
+			'aria-live': 'assertive',
+			'aria-relevant': 'additions',
+			inside: this.container,
+		} );
+
+		// Bind events
+
+		Awesomplete.$.bind( this.input, {
+			input: this.evaluate.bind( this ),
+			blur: this.close.bind( this ),
+			keydown: ( evt ) => {
+				const keyCode = evt.keyCode;
+
+				// If the dropdown `ul` is in view, then act on keydown for the following keys:
+				// Enter / Esc / Up / Down
+				if ( this.opened ) {
+					if ( keyCode === 13 && this.selected ) {
+						// Enter (13)
+						evt.preventDefault();
+						this.select();
+					} else if ( keyCode === 27 ) {
+						// Escape (27)
+						this.close();
+					} else if ( keyCode === 38 || keyCode === 40 ) {
+						// Up (38) / Down (40)
+						evt.preventDefault();
+						this[ keyCode === 38 ? 'previous' : 'next' ]();
+					}
+				}
+			},
+		} );
+
+		Awesomplete.$.bind( this.input.form, { submit: this.close.bind( this ) } );
+
+		Awesomplete.$.bind( this.ul, {
+			mousedown( evt ) {
+				// eslint-disable-next-line id-length
+				let li = evt.target;
+
+				if ( li !== this ) {
+					while ( li && ! /li/i.test( li.nodeName ) ) {
+						li = li.parentNode;
+					}
+
+					if ( li && evt.button === 0 ) {
+						// Only select on left click
+						evt.preventDefault();
+						me.select( li, evt );
+					}
+				}
+			},
+		} );
+
+		if ( this.input.hasAttribute( 'list' ) ) {
+			this.list = '#' + this.input.getAttribute( 'list' );
+			this.input.removeAttribute( 'list' );
+		} else {
+			this.list = this.input.getAttribute( 'data-list' ) || opts.list || [];
 		}
-		else if (typeof list === "string" && list.indexOf(",") > -1) {
-				this._list = list.split(/\s*,\s*/);
+
+		Awesomplete.all.push( this );
+	}
+
+	configure( properties, o ) {
+		for ( var i in properties ) {
+			var initial = properties[ i ],
+				attrValue = this.input.getAttribute( 'data-' + i.toLowerCase() );
+
+			if ( typeof initial === 'number' ) {
+				this[ i ] = parseInt( attrValue );
+			} else if ( initial === false ) {
+				// Boolean options must be false by default anyway
+				this[ i ] = attrValue !== null;
+			} else if ( initial instanceof Function ) {
+				this[ i ] = null;
+			} else {
+				this[ i ] = attrValue;
+			}
+
+			if ( ! this[ i ] && this[ i ] !== 0 ) {
+				this[ i ] = i in o ? o[ i ] : initial;
+			}
 		}
-		else { // Element or CSS selector
-			list = $(list);
+	}
 
-			if (list && list.children) {
-				this._list = slice.apply(list.children).map(function (el) {
+	set list( list ) {
+		if ( Array.isArray( list ) ) {
+			this._list = list;
+		} else if ( typeof list === 'string' && list.indexOf( ',' ) > -1 ) {
+			this._list = list.split( /\s*,\s*/ );
+		} else {
+			// Element or CSS selector
+			list = Awesomplete.$( list );
+
+			if ( list && list.children ) {
+				this._list = slice.apply( list.children ).map( function ( el ) {
 					return el.textContent.trim();
-				});
+				} );
 			}
 		}
 
-		if (document.activeElement === this.input) {
+		if ( document.activeElement === this.input ) {
 			this.evaluate();
 		}
-	},
+	}
 
 	get selected() {
 		return this.index > -1;
-	},
+	}
 
 	get opened() {
-		return this.ul && this.ul.getAttribute("hidden") == null;
-	},
+		return this.ul && this.ul.getAttribute( 'hidden' ) == null;
+	}
 
-	close: function () {
-		this.ul.setAttribute("hidden", "");
+	close() {
+		this.ul.setAttribute( 'hidden', '' );
 		this.index = -1;
 
-		$.fire(this.input, "awesomplete-close");
-	},
+		Awesomplete.$.fire( this.input, 'awesomplete-close' );
+	}
 
-	open: function () {
-		this.ul.removeAttribute("hidden");
+	open() {
+		this.ul.removeAttribute( 'hidden' );
 
-		if (this.autoFirst && this.index === -1) {
-			this.goto(0);
+		if ( this.autoFirst && this.index === -1 ) {
+			this.goto( 0 );
 		}
 
-		$.fire(this.input, "awesomplete-open");
-	},
+		Awesomplete.$.fire( this.input, 'awesomplete-open' );
+	}
 
-	next: function () {
+	next() {
 		var count = this.ul.children.length;
 
-		this.goto(this.index < count - 1? this.index + 1 : -1);
-	},
+		this.goto( this.index < count - 1 ? this.index + 1 : -1 );
+	}
 
-	previous: function () {
+	previous() {
 		var count = this.ul.children.length;
 
-		this.goto(this.selected? this.index - 1 : count - 1);
-	},
+		this.goto( this.selected ? this.index - 1 : count - 1 );
+	}
 
 	// Should not be used, highlights specific item without any checks!
-	goto: function (i) {
-		var lis = this.ul.children;
+	goto( i ) {
+		const lis = this.ul.children;
 
-		if (this.selected) {
-			lis[this.index].setAttribute("aria-selected", "false");
+		if ( this.selected ) {
+			lis[ this.index ].setAttribute( 'aria-selected', 'false' );
 		}
 
 		this.index = i;
 
-		if (i > -1 && lis.length > 0) {
-			lis[i].setAttribute("aria-selected", "true");
-			this.status.textContent = lis[i].textContent;
+		if ( i > -1 && lis.length > 0 ) {
+			lis[ i ].setAttribute( 'aria-selected', 'true' );
+			this.status.textContent = lis[ i ].textContent;
 		}
 
-		$.fire(this.input, "awesomplete-highlight");
-	},
+		Awesomplete.$.fire( this.input, 'awesomplete-highlight' );
+	}
 
-	select: function (selected, originalEvent) {
-		selected = selected || this.ul.children[this.index];
+	select( selected, originalEvent ) {
+		selected = selected || this.ul.children[ this.index ];
 
-		if (selected) {
-			var prevented;
+		if ( selected ) {
+			let prevented;
 
-			$.fire(this.input, "awesomplete-select", {
+			Awesomplete.$.fire( this.input, 'awesomplete-select', {
 				text: selected.textContent,
 				preventDefault: function () {
 					prevented = true;
 				},
-				originalEvent: originalEvent
-			});
+				originalEvent: originalEvent,
+			} );
 
-			if (!prevented) {
-				this.replace(selected.textContent);
+			if ( ! prevented ) {
+				this.replace( selected.textContent );
 				this.close();
-				$.fire(this.input, "awesomplete-selectcomplete");
+				Awesomplete.$.fire( this.input, 'awesomplete-selectcomplete' );
 			}
 		}
-	},
+	}
 
-	evaluate: function() {
-		var me = this;
-		var value = this.input.value;
+	evaluate() {
+		const value = this.input.value;
 
-		if (value.length >= this.minChars && this._list.length > 0) {
+		if ( value.length >= this.minChars && this._list.length > 0 ) {
 			this.index = -1;
 			// Populate list with options that match
-			this.ul.innerHTML = "";
+			this.ul.innerHTML = '';
 
 			this._list
-				.filter(function(item) {
-					return me.filter(item, value);
-				})
-				.sort(this.sort)
-				.every(function(text, i) {
-					me.ul.appendChild(me.item(text, value));
+				.filter( ( item ) => {
+					return this.filter( item, value );
+				} )
+				.sort( this.sort )
+				.every( ( text, i ) => {
+					this.ul.appendChild( this.item( text, value ) );
 
-					return i < me.maxItems - 1;
-				});
+					return i < this.maxItems - 1;
+				} );
 
-			if (this.ul.children.length === 0) {
+			if ( this.ul.children.length === 0 ) {
 				this.close();
 			} else {
 				this.open();
 			}
-		}
-		else {
+		} else {
 			this.close();
 		}
 	}
-};
-
-// Static methods/properties
-
-_.all = [];
-
-_.FILTER_CONTAINS = function (text, input) {
-	return RegExp($.regExpEscape(input.trim()), "i").test(text);
-};
-
-_.FILTER_STARTSWITH = function (text, input) {
-	return RegExp("^" + $.regExpEscape(input.trim()), "i").test(text);
-};
-
-_.SORT_BYLENGTH = function (a, b) {
-	if (a.length !== b.length) {
-		return a.length - b.length;
-	}
-
-	return a < b? -1 : 1;
-};
-
-// Private functions
-
-function configure(properties, o) {
-	for (var i in properties) {
-		var initial = properties[i],
-		    attrValue = this.input.getAttribute("data-" + i.toLowerCase());
-
-		if (typeof initial === "number") {
-			this[i] = parseInt(attrValue);
-		}
-		else if (initial === false) { // Boolean options must be false by default anyway
-			this[i] = attrValue !== null;
-		}
-		else if (initial instanceof Function) {
-			this[i] = null;
-		}
-		else {
-			this[i] = attrValue;
-		}
-
-		if (!this[i] && this[i] !== 0) {
-			this[i] = (i in o)? o[i] : initial;
-		}
-	}
-}
-
-// Helpers
-
-var slice = Array.prototype.slice;
-
-function $(expr, con) {
-	return typeof expr === "string"? (con || document).querySelector(expr) : expr || null;
-}
-
-function $$(expr, con) {
-	return slice.call((con || document).querySelectorAll(expr));
 }
 
-$.create = function(tag, o) {
-	var element = document.createElement(tag);
-
-	for (var i in o) {
-		var val = o[i];
-
-		if (i === "inside") {
-			$(val).appendChild(element);
-		}
-		else if (i === "around") {
-			var ref = $(val);
-			ref.parentNode.insertBefore(element, ref);
-			element.appendChild(ref);
-		}
-		else if (i in element) {
-			element[i] = val;
-		}
-		else {
-			element.setAttribute(i, val);
+Awesomplete.$.create = function ( tag, o ) {
+	const element = document.createElement( tag );
+
+	for ( const i in o ) {
+		const val = o[ i ];
+
+		if ( i === 'inside' ) {
+			Awesomplete.$( val ).appendChild( element );
+		} else if ( i === 'around' ) {
+			const ref = Awesomplete.$( val );
+			ref.parentNode.insertBefore( element, ref );
+			element.appendChild( ref );
+		} else if ( i in element ) {
+			element[ i ] = val;
+		} else {
+			element.setAttribute( i, val );
 		}
 	}
 
 	return element;
 };
 
-$.bind = function(element, o) {
-	if (element) {
-		for (var event in o) {
-			var callback = o[event];
+Awesomplete.$.bind = function ( element, opts ) {
+	if ( element ) {
+		for ( const event in opts ) {
+			const callback = opts[ event ];
 
-			event.split(/\s+/).forEach(function (event) {
-				element.addEventListener(event, callback);
-			});
+			event.split( /\s+/ ).forEach( function ( eventName ) {
+				element.addEventListener( eventName, callback );
+			} );
 		}
 	}
 };
 
-$.fire = function(target, type, properties) {
-	var evt = document.createEvent("HTMLEvents");
+Awesomplete.$.fire = function ( target, type, properties ) {
+	const evt = document.createEvent( 'HTMLEvents' );
 
-	evt.initEvent(type, true, true );
+	// @todo Deprecated: replace. @see https://developer.mozilla.org/en-US/docs/Web/API/Event/initEvent
+	evt.initEvent( type, true, true );
 
-	for (var j in properties) {
-		evt[j] = properties[j];
+	for ( const prop in properties ) {
+		evt[ prop ] = properties[ prop ];
 	}
 
-	target.dispatchEvent(evt);
+	target.dispatchEvent( evt );
 };
 
-$.regExpEscape = function (s) {
-	return s.replace(/[-\\^$*+?.()|[\]{}]/g, "\\$&");
-}
-
-// Initialization
-
-function init() {
-	$$("input.awesomplete").forEach(function (input) {
-		new _(input);
-	});
-}
-
-// Are we in a browser? Check for Document constructor
-if (typeof Document !== "undefined") {
-	// DOM already loaded?
-	if (document.readyState !== "loading") {
-		init();
-	}
-	else {
-		// Wait for it
-		document.addEventListener("DOMContentLoaded", init);
-	}
-}
-
-_.$ = $;
-_.$$ = $$;
-
-// Make sure to export Awesomplete on self when in a browser
-if (typeof self !== "undefined") {
-	self.Awesomplete = _;
-}
-
-// Expose Awesomplete as a CJS module
-if (typeof module === "object" && module.exports) {
-	module.exports = _;
-}
-
-return _;
-
-}());
+Awesomplete.$.regExpEscape = function ( str ) {
+	return str.replace( /[-\\^$*+?.()|[\]{}]/g, '\\$&' );
+};

From c72722e6a3c6921cd6a0ab3cfde7b011cec5727f Mon Sep 17 00:00:00 2001
From: Jon Surrell <sirreal@users.noreply.github.com>
Date: Mon, 29 Jul 2024 13:59:46 +0200
Subject: [PATCH 4/8] Finish module rewrite

---
 .../wporg-developer-2023/inc/autocomplete.php |  49 ++----
 .../wporg-developer-2023/js/autocomplete.js   | 148 ++++++++++--------
 .../wporg-developer-2023/js/awesomplete.js    |  15 +-
 3 files changed, 102 insertions(+), 110 deletions(-)

diff --git a/source/wp-content/themes/wporg-developer-2023/inc/autocomplete.php b/source/wp-content/themes/wporg-developer-2023/inc/autocomplete.php
index ecc32217a..03863c6c5 100644
--- a/source/wp-content/themes/wporg-developer-2023/inc/autocomplete.php
+++ b/source/wp-content/themes/wporg-developer-2023/inc/autocomplete.php
@@ -64,19 +64,18 @@ public function scripts_and_styles() {
 		/*	return;*/
 		/*}*/
 		/**/
-		/*wp_enqueue_style(*/
-		/*	'awesomplete-css',*/
-		/*	get_stylesheet_directory_uri() . '/stylesheets/awesomplete.css',*/
-		/*	array(),*/
-		/*	filemtime( dirname( __DIR__ ) . '/stylesheets/awesomplete.css' )*/
-		/*);*/
-		/*wp_enqueue_style(*/
-		/*	'autocomplete-css',*/
-		/*	get_stylesheet_directory_uri() . '/stylesheets/autocomplete.css',*/
-		/*	array(),*/
-		/*	filemtime( dirname( __DIR__ ) . '/stylesheets/autocomplete.css' )*/
-		/*);*/
-		/**/
+		wp_enqueue_style(
+			'awesomplete-css',
+			get_stylesheet_directory_uri() . '/stylesheets/awesomplete.css',
+			array(),
+			filemtime( get_stylesheet_directory() . '/stylesheets/awesomplete.css' )
+		);
+		wp_enqueue_style(
+			'autocomplete-css',
+			get_stylesheet_directory_uri() . '/stylesheets/autocomplete.css',
+			array(),
+			filemtime( get_stylesheet_directory() . '/stylesheets/autocomplete.css' )
+		);
 
 		wp_register_script_module(
 			'@wporg-developer/awesomplete',
@@ -87,36 +86,16 @@ public function scripts_and_styles() {
 		wp_enqueue_script_module(
 			'@wporg-developer/autocomplete',
 			get_stylesheet_directory_uri() . '/js/autocomplete.js',
-			array( array( 'id' => '@wporg-developer/awesomplete', 'type' => 'dynamic' ) ),
+			array( array( 'id' => '@wporg-developer/awesomplete', 'import' => 'dynamic' ) ),
 			filemtime( get_stylesheet_directory() . '/js/autocomplete.js' )
 		);
 
-		/*wp_register_script(*/
-		/*	'autocomplete',*/
-		/*	get_stylesheet_directory_uri() . '/js/autocomplete.js',*/
-		/*	array( 'awesomplete' ),*/
-		/*	filemtime( dirname( __DIR__ ) . '/js/autocomplete.js' ),*/
-		/*	true*/
-		/*);*/
-		/*wp_localize_script(*/
-		/*	'autocomplete',*/
-		/*	'autocomplete',*/
-		/*	array(*/
-		/*		'ajaxurl'   => admin_url( 'admin-ajax.php' ),*/
-		/*		'nonce'     => wp_create_nonce( 'autocomplete_nonce' ),*/
-		/*		'post_type' => get_post_type(),*/
-		/*	)*/
-		/*);*/
-
-		/*wp_enqueue_script( 'autocomplete' );*/
-
 		add_filter(
 			"script_module_data_@wporg-developer/autocomplete",
 			function ( $data ) {
 				return array_merge( $data, array(
-					'rest_url' => rest_url('wporg-developer/v1/autocomplete'),
+					'endpoint_url' => rest_url('wporg-developer/v1/autocomplete'),
 					'nonce'       => wp_create_nonce( 'wporg/autocomplete' ),
-					'post_type'   => get_post_type(),
 				) );
 			}
 		);
diff --git a/source/wp-content/themes/wporg-developer-2023/js/autocomplete.js b/source/wp-content/themes/wporg-developer-2023/js/autocomplete.js
index e64cf46eb..a8198cf90 100644
--- a/source/wp-content/themes/wporg-developer-2023/js/autocomplete.js
+++ b/source/wp-content/themes/wporg-developer-2023/js/autocomplete.js
@@ -19,10 +19,6 @@ function init() {
 		return;
 	}
 
-	if ( typeof window.Awesomplete === 'undefined' ) {
-		return;
-	}
-
 	const form = document.querySelector( '#wporg-search .wp-block-search' );
 	if ( ! form ) {
 		return;
@@ -38,85 +34,105 @@ function init() {
 	let search = '';
 	let autocompleteResults = new Map();
 
-	const awesome = new Awesomplete( searchfield, {
-		maxItems: 9999,
-		minChars: 3,
-		filter: function ( text, input ) {
-			// Filter autocomplete matches
+	let awesome;
 
-			// Full match
-			if ( Awesomplete.FILTER_CONTAINS( text, input ) ) {
-				// mark
-				return true;
-			}
+	async function createAwesomplete() {
+		const Awesomplete = ( await import( '@wporg-developer/awesomplete' ) ).Awesomplete;
+		return new Awesomplete( searchfield, {
+			maxItems: 9999,
+			minChars: 3,
+			filter: ( text, input ) => {
+				// Filter autocomplete matches
 
-			// Replace - _ and whitespace with a single space
-			var _text = Awesomplete.$.regExpEscape(
-				text
-					.trim()
-					.toLowerCase()
-					.replace( /[\_\-\s]+/g, ' ' )
-			);
-			var _input = Awesomplete.$.regExpEscape(
-				input
-					.trim()
-					.toLowerCase()
-					.replace( /[\_\-\s]+/g, ' ' )
-			);
-
-			// Matches with with single spaces between words
-			if ( Awesomplete.FILTER_CONTAINS( _text, _input ) ) {
-				return true;
-			}
+				// Full match
+				if ( Awesomplete.FILTER_CONTAINS( text, input ) ) {
+					// mark
+					return true;
+				}
 
-			_input = _input.split( ' ' );
-			var words = _input.length;
+				// Replace - _ and whitespace with a single space
+				const _text = Awesomplete.$.regExpEscape(
+					text
+						.trim()
+						.toLowerCase()
+						.replace( /[\_\-\s]+/g, ' ' )
+				);
+				const _input = Awesomplete.$.regExpEscape(
+					input
+						.trim()
+						.toLowerCase()
+						.replace( /[\_\-\s]+/g, ' ' )
+				);
+
+				// Matches with with single spaces between words
+				if ( Awesomplete.FILTER_CONTAINS( _text, _input ) ) {
+					return true;
+				}
 
-			if ( 1 >= words ) {
-				return false;
-			}
+				const words = _input.split( ' ' ).length;
 
-			// Partial matches
-			var partials = 0;
-			for ( i = 0; i < words; i++ ) {
-				if ( _text.indexOf( _input[ i ].trim() ) !== -1 ) {
-					partials++;
+				if ( 1 >= words ) {
+					return false;
 				}
-			}
 
-			if ( partials === words ) {
-				return true;
-			}
+				// Partial matches
+				let partials = 0;
+				for ( let i = 0; i < words; i++ ) {
+					if ( _text.indexOf( _input[ i ].trim() ) !== -1 ) {
+						partials++;
+					}
+				}
 
-			return false;
-		},
-		replace: function ( text ) {
-			searchfield.val( text );
+				if ( partials === words ) {
+					return true;
+				}
 
-			if ( autocompleteResults.has( text ) ) {
-				window.location = autocompleteResults.get( text );
-			}
-		},
-	} );
+				return false;
+			},
+			replace: ( text ) => {
+				searchfield.val( text );
+
+				if ( autocompleteResults.has( text ) ) {
+					window.location = autocompleteResults.get( text );
+				}
+			},
+		} );
+	}
 
 	// On input event for the search field.
-	searchfield.addEventListener( 'input', function ( e ) {
-		// Update the autocomplete list:
-		//     if there are more than 2 characters
-		//     and it's not already processing an Ajax request
-		if ( ! processing && this.value.trim().length > 2 ) {
-			search = this.value;
-			autocomplete_update();
-		}
-	} );
+	searchfield.addEventListener(
+		'input',
+		async function () {
+			const el = this;
+			// Update the autocomplete list:
+			//     if there are more than 2 characters
+			//     and it's not already processing an Ajax request
+			if ( ! processing && this.value.trim().length > 2 ) {
+				search = this.value;
+				await autocomplete_update( el );
+			}
+		},
+		{ passive: true }
+	);
 
 	/**
 	 * Updates the autocomplete list
 	 */
-	async function autocomplete_update() {
+	async function autocomplete_update( el ) {
+		if ( processing ) {
+			return;
+		}
+
+		if ( ! awesome ) {
+			// When the autocomplete is created, the node is moved and looses focus.
+			// Restore it.
+			awesome = await createAwesomplete();
+			el.focus();
+		}
+
 		processing = true;
 
-		const url = new URL( data.rest_url, document.location.href );
+		const url = new URL( data.endpoint_url );
 
 		const requestData = {
 			search: form.elements.namedItem( 's' )?.value ?? '',
diff --git a/source/wp-content/themes/wporg-developer-2023/js/awesomplete.js b/source/wp-content/themes/wporg-developer-2023/js/awesomplete.js
index 5a58f0ccc..1840c3195 100644
--- a/source/wp-content/themes/wporg-developer-2023/js/awesomplete.js
+++ b/source/wp-content/themes/wporg-developer-2023/js/awesomplete.js
@@ -1,8 +1,7 @@
 /**
- * Simple, lightweight, usable local autocomplete library for modern browsers
- * Because there weren’t enough autocomplete scripts in the world? Because I’m completely insane and have NIH syndrome? Probably both. :P
- * @author Lea Verou http://leaverou.github.io/awesomplete
- * MIT license
+ * Awesomplete module.
+ *
+ * Adapted from (MIT license): https://leaverou.github.io/awesomplete/
  */
 
 const slice = Array.prototype.slice;
@@ -52,7 +51,7 @@ export class Awesomplete {
 				autoFirst: false,
 				filter: Awesomplete.FILTER_CONTAINS,
 				sort: Awesomplete.SORT_BYLENGTH,
-				item: function ( text, itemInput ) {
+				item: ( text, itemInput ) => {
 					const html =
 						itemInput === ''
 							? text
@@ -65,7 +64,7 @@ export class Awesomplete {
 						'aria-selected': 'false',
 					} );
 				},
-				replace: function ( text ) {
+				replace: ( text ) => {
 					this.input.value = text;
 				},
 			},
@@ -185,9 +184,7 @@ export class Awesomplete {
 			list = Awesomplete.$( list );
 
 			if ( list && list.children ) {
-				this._list = slice.apply( list.children ).map( function ( el ) {
-					return el.textContent.trim();
-				} );
+				this._list = slice.apply( list.children ).map( ( el ) => el.textContent.trim() );
 			}
 		}
 

From 76c1c37e86eb4453e1b3f9f78277beffebea7768 Mon Sep 17 00:00:00 2001
From: Jon Surrell <sirreal@users.noreply.github.com>
Date: Mon, 29 Jul 2024 14:03:43 +0200
Subject: [PATCH 5/8] Fix lints

---
 .../wporg-developer-2023/js/awesomplete.js    | 22 +++++++++----------
 1 file changed, 11 insertions(+), 11 deletions(-)

diff --git a/source/wp-content/themes/wporg-developer-2023/js/awesomplete.js b/source/wp-content/themes/wporg-developer-2023/js/awesomplete.js
index 1840c3195..65f6f96f8 100644
--- a/source/wp-content/themes/wporg-developer-2023/js/awesomplete.js
+++ b/source/wp-content/themes/wporg-developer-2023/js/awesomplete.js
@@ -152,10 +152,10 @@ export class Awesomplete {
 		Awesomplete.all.push( this );
 	}
 
-	configure( properties, o ) {
-		for ( var i in properties ) {
-			var initial = properties[ i ],
-				attrValue = this.input.getAttribute( 'data-' + i.toLowerCase() );
+	configure( properties, opts ) {
+		for ( const i in properties ) {
+			const initial = properties[ i ];
+			const attrValue = this.input.getAttribute( 'data-' + i.toLowerCase() );
 
 			if ( typeof initial === 'number' ) {
 				this[ i ] = parseInt( attrValue );
@@ -169,7 +169,7 @@ export class Awesomplete {
 			}
 
 			if ( ! this[ i ] && this[ i ] !== 0 ) {
-				this[ i ] = i in o ? o[ i ] : initial;
+				this[ i ] = i in opts ? opts[ i ] : initial;
 			}
 		}
 	}
@@ -184,7 +184,7 @@ export class Awesomplete {
 			list = Awesomplete.$( list );
 
 			if ( list && list.children ) {
-				this._list = slice.apply( list.children ).map( ( el ) => el.textContent.trim() );
+				this._list = slice.apply( list.children ).map( ( element ) => element.textContent.trim() );
 			}
 		}
 
@@ -219,13 +219,13 @@ export class Awesomplete {
 	}
 
 	next() {
-		var count = this.ul.children.length;
+		const count = this.ul.children.length;
 
 		this.goto( this.index < count - 1 ? this.index + 1 : -1 );
 	}
 
 	previous() {
-		var count = this.ul.children.length;
+		const count = this.ul.children.length;
 
 		this.goto( this.selected ? this.index - 1 : count - 1 );
 	}
@@ -300,11 +300,11 @@ export class Awesomplete {
 	}
 }
 
-Awesomplete.$.create = function ( tag, o ) {
+Awesomplete.$.create = function ( tag, opts ) {
 	const element = document.createElement( tag );
 
-	for ( const i in o ) {
-		const val = o[ i ];
+	for ( const i in opts ) {
+		const val = opts[ i ];
 
 		if ( i === 'inside' ) {
 			Awesomplete.$( val ).appendChild( element );

From 0ffce5ba57a0a919d844b7a90555e36a90b3e7be Mon Sep 17 00:00:00 2001
From: Jon Surrell <sirreal@users.noreply.github.com>
Date: Mon, 29 Jul 2024 14:05:09 +0200
Subject: [PATCH 6/8] This is a script module implementation with awesomplete


From e383a37aec373a5c4eb79b7ae361bd029e919842 Mon Sep 17 00:00:00 2001
From: Jon Surrell <sirreal@users.noreply.github.com>
Date: Mon, 29 Jul 2024 19:42:15 +0200
Subject: [PATCH 7/8] Uncomment desired code

---
 .../themes/wporg-developer-2023/inc/autocomplete.php      | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/source/wp-content/themes/wporg-developer-2023/inc/autocomplete.php b/source/wp-content/themes/wporg-developer-2023/inc/autocomplete.php
index 03863c6c5..ec63e3900 100644
--- a/source/wp-content/themes/wporg-developer-2023/inc/autocomplete.php
+++ b/source/wp-content/themes/wporg-developer-2023/inc/autocomplete.php
@@ -60,10 +60,10 @@ function () {
 	public function scripts_and_styles() {
 
 		// Handbook searches don't have autocomplete.
-		/*if ( function_exists( 'wporg_is_handbook' ) && wporg_is_handbook() ) {*/
-		/*	return;*/
-		/*}*/
-		/**/
+		if ( function_exists( 'wporg_is_handbook' ) && wporg_is_handbook() ) {
+			return;
+		}
+
 		wp_enqueue_style(
 			'awesomplete-css',
 			get_stylesheet_directory_uri() . '/stylesheets/awesomplete.css',

From 0aeae346ac335eb42c5a028a990d7fd44cb4da28 Mon Sep 17 00:00:00 2001
From: Jon Surrell <sirreal@users.noreply.github.com>
Date: Mon, 29 Jul 2024 19:45:18 +0200
Subject: [PATCH 8/8] No schema for endpoint

---
 .../wporg-developer-2023/inc/autocomplete.php       | 13 -------------
 1 file changed, 13 deletions(-)

diff --git a/source/wp-content/themes/wporg-developer-2023/inc/autocomplete.php b/source/wp-content/themes/wporg-developer-2023/inc/autocomplete.php
index ec63e3900..42f48c1bc 100644
--- a/source/wp-content/themes/wporg-developer-2023/inc/autocomplete.php
+++ b/source/wp-content/themes/wporg-developer-2023/inc/autocomplete.php
@@ -30,19 +30,6 @@ function () {
 						'methods'             => 'POST',
 						'callback'            => array( $this, 'autocomplete_rest_handler' ),
 						'permission_callback' => '__return_true',
-						'schema' => function () {
-							return array(
-								'html' => array(
-									'description' => 'The HTML to process.',
-									'type' => 'string',
-									'required' => true,
-								),
-								'quirksMode' => array(
-									'description' => 'Process the document in quirks mode.',
-									'type' => 'boolean',
-								),
-							);
-						},
 					)
 				);
 			}