Friday 15 March 2019

How to Make a WordPress Settings Autocomplete Field Using Ajax


Please put this code in functions.php file.


add_action( 'admin_enqueue_scripts', function() { 
wp_enqueue_script('suggest-js', get_stylesheet_directory_uri().'/js/suggest.js', array( 'suggest' ), '1.0', true );
});

Create suggest.js in theme folder and put this code in suggest.js file

(function(window, document, $, undefined){

var hpadmin = {};

  hpadmin.init = function() {

    $('#blogs_creators').suggest( window.ajaxurl + "?action=ajax-tag-search&tax=category", {multiple:true, multipleSep: ","});

  }

  hpadmin.init();

})(window, document, jQuery);

jQuery('#blogs_creators').suggest( window.ajaxurl + "?action=hwp_ajax_page_search", {multiple:true, multipleSep: ","})


Note: #blogs_creators is a settings custom field id.

Now put this code also in functions.php file.

add_action( 'wp_ajax_hwp_ajax_page_search', function() {

            $s = wp_unslash( $_GET['q'] );

            $comma = _x( ',', 'page delimiter' );
            if ( ',' !== $comma )
                $s = str_replace( $comma, ',', $s );
            if ( false !== strpos( $s, ',' ) ) {
                $s = explode( ',', $s );
                $s = $s[count( $s ) - 1];
            }
            $s = trim( $s );

            $term_search_min_chars = 2;

            $the_query = new WP_Query( 
                array( 
                    's' => $s,
                    'posts_per_page' => 5,
                    'post_type' => 'page'
                    ) 
                );

            if ( $the_query->have_posts() ) {
                while ( $the_query->have_posts() ) {
                    $the_query->the_post();
                    $results[] = get_the_title();
                }
                /* Restore original Post Data */
                wp_reset_postdata();
            } else {
                $results = 'No results';
            }

            echo join( $results, "\n" );
            wp_die();
});


Reference Link