Changeset 58957

Timestamp:

08/30/2024 10:15:59 PM (2 years ago)

Author:

joedolson

Message:

Plugins: Delay AJAX search until after 2 characters.

Prevent the AJAX search results from firing until after at least 2 characters have been typed into the search boxes. Toggle autocomplete value once AJAX is firing. Add a changeable minimum character threshold.

Props armandsdz, adamsilverstein, afercia, mklusak, finalwebsites, joedolson.
Fixes #38211.

File:

• trunk/src/js/_enqueues/wp/updates.js (modified) (6 diffs)

trunk/src/js/_enqueues/wp/updates.js

@@ -143 +143 @@
 
         /**
+         * Minimum number of characters before an ajax search is fired.
+         *
+         * @since 6.7.0
+         *
+         * @type {number}
+         */
+        wp.updates.searchMinCharacters = 2;
+
+        /**
          * Whether filesystem credentials need to be requested from the user.
          *
@@ -2978 +2987 @@
                 }
 
+                // Track the previous search string length.
+                var previousSearchStringLength = 0;
+                wp.updates.shouldSearch = function( searchStringLength ) {
+                        var shouldSearch = searchStringLength >= wp.updates.searchMinCharacters ||
+                                previousSearchStringLength > wp.updates.searchMinCharacters;
+                        previousSearchStringLength = searchStringLength;
+                        return shouldSearch;
+                };
+
                 /**
                  * Handles changes to the plugin search box on the new-plugin page,
@@ -2985 +3003 @@
                  */
                 $pluginInstallSearch.on( 'keyup input', _.debounce( function( event, eventtype ) {
-                        var $searchTab = $( '.plugin-install-search' ), data, searchLocation;
+                        var $searchTab = $( '.plugin-install-search' ), data, searchLocation,
+                                searchStringLength = $pluginInstallSearch.val().length;
 
                         data = {
@@ -2995 +3014 @@
                         };
                         searchLocation = location.href.split( '?' )[ 0 ] + '?' + $.param( _.omit( data, [ '_ajax_nonce', 'pagenow' ] ) );
+
+                        // Set the autocomplete attribute, turning off autocomplete 1 character before ajax search kicks in.
+                        if ( wp.updates.shouldSearch( searchStringLength ) ) {
+                                $pluginInstallSearch.attr( 'autocomplete', 'off' );
+                        } else {
+                                $pluginInstallSearch.attr( 'autocomplete', 'on' );
+                                return;
+                        }
 
                         // Clear on escape.
@@ -3055 +3082 @@
                 if ( $pluginSearch.length ) {
                         $pluginSearch.attr( 'aria-describedby', 'live-search-desc' );
+
                 }
 
@@ -3070 +3098 @@
                                 plugin_status: 'all'
                         },
-                        queryArgs;
+                        queryArgs,
+                        searchStringLength = $pluginSearch.val().length;
+
+                        // Set the autocomplete attribute, turning off autocomplete 1 character before ajax search kicks in.
+                        if ( wp.updates.shouldSearch( searchStringLength ) ) {
+                                $pluginSearch.attr( 'autocomplete', 'off' );
+                        } else {
+                                $pluginSearch.attr( 'autocomplete', 'on' );
+                                return;
+                        }
 
                         // Clear on escape.