wp-admin-filter-widgets.php

<?php
/**
 *  FILTER WIDGETS IN WP ADMIN
 *  assuming you already enqueued some of your js / css in WP admin ( customAdminCode() ) :
 *  include (or separately enqueue) this jQuery plugin - https://github.com/cheeaun/jquery.livefilter
 *  all code (php,js,css) is here, but you should separate it, off course ... ;)
 */
function customAdminCode() {
		
	wp_register_script('my-admin-js', get_template_directory_uri(). '/js/admin/admin.js');
	wp_enqueue_script( 'my-admin-js', get_template_directory_uri(). '/js/admin/admin.js', array('jQuery'), '1.0', true );
	
	// Localize the script with our data.
	$translation_array = array( 
		'filter_widgets'	=> esc_html__( 'Filter widgets','my-theme' ),
	);
	wp_localize_script( 'my-admin-js', 'wpi18n_admin', $translation_array );
	
}
add_action('admin_head', 'customAdminCode');
/**
 *  Then, add this js to your admin js file
 */
?>
<script type="text/javascript">
function filterWidgets() {
	
	// Only on widgets admin pages
	if( ! $('body').hasClass('widgets-php') ) {
		return;
	}
	
	// Get available widgets container and element to add input for filtering
	var widgets			= $('#available-widgets'),
		filterHolder	= widgets.find('.sidebar-description');
	
	// Append input to filter widgets
	filterHolder.append('<div class="my-widgets-filter"><label for="filter-widgets">'+ wpi18n_admin.filter_widgets +':</label><input type="text" id="filter-widgets" value=""></div>');
	
	// Start liveFilter plugin
	$('#widget-list').liveFilter(
		'#filter-widgets',
		'.widget', 
		{
			filterChildSelector: '.widget-title h3'
		}
	);
	
}
filterWidgets();
</script>

<!-- Then add this CSS to your (already enqueued) admin CSS file: -->

<style type="text/css">
.my-widgets-filter {
    display: flex;
    flex-direction: row;
    padding: 0 0 20px;
    align-items: center;
    align-content: stretch;
}
.my-widgets-filter label {
	flex-grow: 0;
	font-weight: 600;
	padding-right: 10px;
}
.my-widgets-filter input {
	flex-grow: 1;
}
#available-widgets #widget-list {
    position: relative;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    margin: 0px -5px;
}
@media only screen and (min-width: 1250px) {
	#widgets-left #available-widgets .widget {
		width: 50%;
		padding: 0 5px;
		float: left;
	}
	#available-widgets .widget:nth-child(odd) {
		clear: none;
	}
}
</style>