Ytukyg

I am trying to get a JQuery autocomplete script to work in Wordpress. I believe I have everything set up correctly as I do get an error when I enter data into the input field, but then I get the following error. So, I am supposing something is wrong with the JSON, but I am just not sure how to debug that.

Uncaught SyntaxError: Unexpected token < in JSON at position 0

        at JSON.parse (<anonymous>)

        at Function.n.parseJSON (jquery.js?ver=1.12.4:4)

        at Function.a.parseJSON (jquery-migrate.min.js?ver=1.4.1:2)

        at Object._transformResult [as transformResult] (jquery.autocomplete.js?ver=4.9.8:133)

        at Object.<anonymous> (jquery.autocomplete.js?ver=4.9.8:584)

        at i (jquery.js?ver=1.12.4:2)

        at Object.fireWith [as resolveWith] (jquery.js?ver=1.12.4:2)

        at y (jquery.js?ver=1.12.4:4)

        at XMLHttpRequest.c (jquery.js?ver=1.12.4:4)

Here is the JSON that is being returned:

["Hello world!","Email Notification","Email Notification","Formidable Style","Email Notification","Email Notification","Email Notification","Chapter Maintenance - Admin View","Chapter Info - All","Featured Members"]

From other posts I have looked at the comment is that it isn't being parsed correctly, but I can't determine from my research how to resolve that.

Here is the Jquery:

jQuery(document).ready(function($) {    



    $('#autocomplete-id').autocomplete({

        source: function(name, response) {

            $.ajax({

                type: 'POST',

                dataType: 'json',

                url: '/wp-admin/admin-ajax.php',

                data: 'action=get_listing_names&name='+name,



                success: function(data) {

                    response(data);



                }

            });



        }

    });



});

Here is the function in Wordpress's functions.php I am using to return the JSON via the admin-ajax.php

add_action('wp_ajax_nopriv_get_listing_names', 'ajax_listings');

add_action('wp_ajax_get_listing_names', 'ajax_listings');





    function ajax_listings() {

        global $wpdb; //get access to the WordPress database object variable



        //get names of all businesses

        $name = $wpdb->esc_like(stripslashes($_POST['name'])).'%'; //escape for use in LIKE statement

        $sql = "select post_title 

            from $wpdb->posts 

            where post_status='publish' LIMIT 10";



        $sql = $wpdb->prepare($sql, $name);



        $results = $wpdb->get_results($sql);



        //copy the business titles to a simple array

        $titles = array();

        foreach( $results as $r )

            $titles = addslashes($r->post_title);







        echo json_encode($titles); //encode into JSON format and output



        die(); //stop "0" from being output

    }

I have tried to console.log(data) into the success area, but all I get back is the error without any data.

When I look at the Network tab I see the requests from when I enter a letter into the input box, but all they show are ?query=a or ?query=b.

If I click on one of those it loads up the same page I am currently on (with the autocomplete input box) with ?query=a tacked onto the end of it, so that doesn't look right.

I'm just not sure why though, if it is set up correctly to get the data from admin-ajax.php.

My main question is, what can I do to debug this further?

Here is my code, Maybe this will help you.

JS file(global.js) Code

jQuery(document).ready(function($) {    



var searchRequest;

$('#autocomplete-id').autoComplete({

    minChars: 2,

    source: function(name, result){

        try { searchRequest.abort(); } catch(e){}

        searchRequest = $.post(global.ajax, { name: name, action: 'get_listing_names' }, function(res) {

            result(res.data);

        });

    }

});

});

Functions.php File code

    <?php

/**

 * Enqueue scripts and styles.

 *

 * @since 1.0.0

 */

function ja_global_enqueues() {

    wp_enqueue_style(

        'jquery-auto-complete',

        'https://cdnjs.cloudflare.com/ajax/libs/jquery-autocomplete/1.0.7/jquery.auto-complete.css',

        array(),

        '1.0.7'

    );

    wp_enqueue_script(

        'jquery-auto-complete',

        'https://cdnjs.cloudflare.com/ajax/libs/jquery-autocomplete/1.0.7/jquery.auto-complete.min.js',

        array( 'jquery' ),

        '1.0.7',

        true

    );

    wp_enqueue_script(

        'global',

        get_template_directory_uri() . '/js/global.js',

        array( 'jquery' ),

        '1.0.0',

        true

    );

    wp_localize_script(

        'global',

        'global',

        array(

            'ajax' => admin_url( 'admin-ajax.php' ),

        )

    );

}

add_action( 'wp_enqueue_scripts', 'ja_global_enqueues' );





add_action('wp_ajax_nopriv_get_listing_names', 'ajax_listings');

add_action('wp_ajax_get_listing_names', 'ajax_listings');





function ajax_listings() {

    global $wpdb; //get access to the WordPress database object variable



    //get names of all businesses

    $name = $wpdb->esc_like(stripslashes($_POST['name'])).'%'; //escape for use in LIKE statement

    $sql = "select post_title 

        from $wpdb->posts 

        where post_status='publish' LIMIT 10";



    $sql = $wpdb->prepare($sql, $name);



    $results = $wpdb->get_results($sql);



    //copy the business titles to a simple array

    $titles = array();



    foreach( $results as $r ){

        $titles = addslashes($r->post_title);

    }



    wp_send_json_success( $titles );        



}