Take the 2-minute tour ×
WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.

Overview: I am trying to create a simple jquery autocomplete in a wordpress theme, on a custom template page containing a form. I wish for it to work both front-end, for logged in users, and the general public. It is part of a theme (not a plugin). I have followed along with a post here, but I am unsuccessful.

The problem: Even though I am expecting autocomplete to occur as I type in the name field (the one with id="autocompleteID"), I don't see anything happening. Also, there is an error in my GET request, it says '403 forbidden'. (see image below)

I get an error on the GET request


Relevant Directory Structure of the theme root:



    source: function(request, response){
        jQuery.getJson(autocompleteAjaxObject.ajaxurl + "?callback=?&action=autocompleteAjaxAction",request,function(data){
            response(jQuery.map(data, function(item){
                jQuery.each(item, function(i,val){
                    val.label = val.whatever;
                return item;

template-cusotomers.php (A custom template page):

get_header(); ?>

            <div id="primary">
                    <div id="content" role="main">

                            <?php while ( have_posts() ) : the_post(); ?>

                                    <?php get_template_part( 'content', 'page' ); ?>


                                    if (is_user_logged_in()):?>

                                            <form type="post" action="" id="newCustomerForm">

                                                    <label for="name">Name:</label>
                                                    <input id="autocompleteID" name="name" type="text" />

                                                    <label for="email">Email:</label>
                                                    <input name="email" type="text" />

                                                    <label for="phone">Phone:</label>
                                                    <input name="phone" type="text" />

                                                    <label for="address">Address:</label>
                                                    <input name="address" type="text" />

                                                    <input type="hidden" name="action" value="addCustomer"/>
                                                    <input type="submit">
                                            <div id="feedback"></div>

                                            global $wpdb;
                                            $customers = $wpdb->get_results("SELECT * FROM friends;");

                                            echo "<table>";
                                            foreach($customers as $customer){
                                                    echo "<tr>";
                                                    echo "<td>".$customer->name."</td>";
                                                    echo "</tr>";
                                            echo "</table>";
                                            echo "Sorry, only registered users can view this information";


                                    <!--<script type="text/javascript">

                                            function ajaxSubmit(){

                                                    var newCustomerForm = jQuery(this).serialize();

                                                            //url: "http://hostcals.localhost/soilscienceextension/wp-admin/admin-ajax.php",
                                                            //url: "/wp-admin/admin-ajax.php",
                                                            url: ajaxurl,
                                                            data: newCustomerForm,
                                                error: function(errorThrown){

                                                    return false;
                                    </script> -->

                            <?php endwhile; // end of the loop. ?>

                    </div><!-- #content -->
            </div><!-- #primary -->

a snippet from Functions.php:

wp_register_script('autocompleteAjaxHandle',get_stylesheet_directory() .   "/autocompleteAjax.js");
wp_localize_script('autocompleteAjaxHandle', 'autocompleteAjaxObject', array(

function get_autocomplete_suggestions(){
    $suggestions_array=array( 'captain crunch', 'chex', 'cheerios');

    $response = $_GET["callback"]. "(" . json_encode($suggestions_array) . ")";
    echo $response;

add_action('wp_ajax_autocompleteAjaxAction', 'get_autocomplete_suggestions');
add_action('wp_ajax_nopriv_autocompleteAjaxAction', 'get_autocomplete_suggestions'); 


Overview of the Question:

I aspire to create a simple jquery autocomplete functionality, but I am having a difficult time understanding why the form does not behave as I would expect, and it seems to be producing a GET error. What is causing the problems, and what can I do to be more successful?

share|improve this question

Your Answer


By posting your answer, you agree to the privacy policy and terms of service.

Browse other questions tagged or ask your own question.