How to add widget search into the WordPress Widgets page

Quick Preview

To add the search follow below steps:

Step 1: Add search input field in WordPress backend #Step 1: Add search input field in WordPress backend

• Open file /wp-admin/widgets.php
• Goto line 429
• Press enter key and add below code:

<div class="widgets-search">
	<input type="search" id="widgets-search-input" class="regular-text" placeholder="<?php _e('Search widgets...'); ?>">
</div>

Step 2: Add CSS for the input field #Step 2: Add CSS for the input field

• Open file /wp-admin/css/widgets.css
• Goto line 775
• Press enter key and add below code:

/* =Widget Search
-------------------------------------------------------------- */
#widgets-search-input {
	margin: 0 0 .2em 0;
	width: 100%;
	font-size: 16px;
	font-weight: 300;
	line-height: 1.5;
	border-width: 1px;
	border-style: solid;
	border-color: #ddd;
}


.show-widget {
    display: block;
}

.hide-widget {
    display: none;
}

Step 3: Add JS for the search widgets #Step 3: Add JS for the search widgets

• Open file /wp-admin/js/widgets.js
• Goto line 504
• Press enter key and add below code:

/*
 * Use feature detection to determine whether inputs should use
 * the `keyup` or `input` event. Input is preferred but lacks support
 * in legacy browsers. See changeset 34078, see also ticket #26600#comment:59
 */
if ( 'oninput' in document.createElement( 'input' ) ) {
	inputEvent = 'input';
} else {
	inputEvent = 'keyup';
}

$( '#widgets-search-input' ).on( inputEvent, function() {

	var search_term   = $('#widgets-search-input').val() || '',
		parent        = $('#widgets-left'),
		widgets       = parent.find('.widget'),
		widget_titles = parent.find('.widget-title');

	if( search_term.length ) {

		// Hide all widgets. Because, Below we show those widgets
		// which have search term in the widget title.
		widgets.addClass('hide-widget').removeClass('show-widget');

		// Search widget and ONLY show these widgets which "contain" the widget title.
		var rex = new RegExp( search_term, 'i');
        widget_titles.filter(function () {
			var widget_name = $.trim( $(this).text() ) || '';
        	return rex.test( widget_name );
        }).parents('.widget').removeClass('hide-widget').addClass('show-widget');

	} else {

		// Show all widgets.
		widgets.removeClass('hide-widget').addClass('show-widget');
	}
});

Great! #Great!

Or

Also, check below complete code snippet gist:

See how it widget search works in below video:

I have created a patch for the WordPress core. See https://core.trac.wordpress.org/ticket/47540