Ajax and autocomplete with PHP in Wordpress

[adige72]

I have an input text and want it to suggest custom taxonomy terms as soon as i type on it.

These codes below i found after some googling, gives the idea about how to use autocomplete method in WP but i can't figure out how to achieve custom taxonomy terms suggestion in the input box.

suggest.js:

   $( '#tags' ).autocomplete(
    {
        minLength: 2,
        source: function( request, response ) {
            jQuery.getJSON( MyAjax_object.ajaxurl + "?submittags=?&action=myajax-submit", request, function( data ) {
                response( jQuery.map( data, function( item ) {
                    jQuery.each( item, function( i, val ) {
                        val.label = val.whatever; // build result for autocomplete from suggestion array data
                    } );
                        return item;
                } ) );
            } );  
        },



});

functions.php:

function enque_template_scripts() {
    wp_enqueue_script( 'myajax_jsfile_handle', get_bloginfo('template_directory')."/suggest.js", array( 'jquery', 'jquery-form', 'json2' ), false, true ); );
    wp_localize_script( 
        'myajax_jsfile_handle', 
        'MyAjax_object', 
        array( 
            'ajaxurl' => admin_url( 'admin-ajax.php' ),
            'myajax_nonce' => wp_create_nonce( 'myajax_nonce_val' ),
            'action' => 'myajax-submit'
        )
    );
    add_action('get_header', 'enque_template_scripts');

    function get_my_suggestions() {
    // This function should query the database and get results as an array of rows:
    // GET the recieved data: 'term' (what has been typed by the user)
    $term = $_GET['term']
    $suggestions_array = array();

    // echo JSON to page  and exit.
    $response = $_GET["submittags"]."(". json_encode($suggestions_array) .")";  
    echo $response;  
    exit;
    }
    add_action( 'wp_ajax_myajax-submit', 'get_my_suggestions' );

input text:

<input type="text" id="tags" name="submittags" value="" autocomplete="false" />

I guess the trick would be in:

    val.label = val.whatever;

and in

get_my_suggestions

function. But how?

Any idea?

Many thanks in advance.

[blocblue]

I've not encountered the get_header action before. Should this not be wp_head? I've also not used the wp_localize_script function either.

When using ajax functionality in WP admin, I too have used the wp_ajax_<your action name> action, which to call needs to correspond to the action called on the ajax-admin.php URL.

Here's an example of my code:

/**
 * Output profile course select meta box.
 *
 * @return void
 */
function profile_course_select_meta_box()
{
    ?>

    <p>
        <label for="course-select" class="screen-reader-text">Course selection</label>
        <input id="course-select" class="large-text" type="text" name="profile_course_id" value="" />
    </p>
    <script type="text/javascript" >
        jQuery(function($) {
            $('#course-select').tokenInput('admin-ajax.php?action=profile_course_select', {
                prePopulate: <?php echo pre_populate_courses(); ?>
            });
        });
    </script>

    <?php
}

/**
 * Register ajax action for responding to profile course select queries.
 *
 * @return void
 */
function ajax_profile_course_select() 
{
    global $wpdb;
    $q = isset($_GET['q']) ? "%{$_GET['q']}%" : '';

    $sql = "SELECT `id`, `name`
        FROM `courses`
        WHERE `name` LIKE %s
        ORDER BY `name` ASC";
    $sql = $wpdb->prepare($sql, $q);
    $courses = $wpdb->get_results($sql, ARRAY_A);

    echo json_encode($courses);
    exit(0);
}
add_action('wp_ajax_profile_course_select', 'ajax_profile_course_select');

I'm not sure if this helps, but the aforementioned code definitely works, so could be a good starting point if you strip back what you have and start a fresh.

[blocblue]

Another point - have you checked for JavaScript errors.

I distinctly recall that the $ selector cannot be used directly within the WP admin. Instead you need to wrap and reassign it before use. E.g.

jQuery(function($) {
    // Now you can use $
});