Add search to ‘Parent’ dropdown

by

You can try using Chosen. I use it because it’s bundled with WooCommerce. It basically adds search box to the <select> element. I leave the styling to you. The easiest solution is to add it as a plugin. But you can add it to your theme if you want.

  1. Add the CSS and JS files:

    <?php
function custom_scripts_wpse_215576() {
    //Chosen CSS file
    wp_enqueue_style ( 'chose-style', plugin_dir_url( __FILE__ ) . 'css/chosen.min.css', array(), '1.4.2', true );
    //Chosen JS file
    wp_enqueue_script( 'chosen-script', plugin_dir_url( __FILE__ ) . 'js/chosen.jquery.min.js', array(), '1.4.2', true );
    //Your JS file that will fire up Chosen
    wp_enqueue_script( 'main-script', plugin_dir_url( __FILE__ ) . 'js/main-script.js', array(), '1.0.0', true );
}

add_action( 'admin_enqueue_scripts', 'custom_scripts_wpse_215576' );
?>

  2. Fire Chosen via the main-script file or anywhere you want:

    jQuery( document ).ready(function() {
    jQuery("#parent_id").chosen({
        search_contains: true
    });
});

Note: #parent_id is the ID of the parent dropdown.

This is the basic setup. By defaults it will add a search box. Consult with the docs to tailor it to your custom setup. I hope it helps.