1

I was following this tutorial,

http://gabrieleromanato.name/adding-jquery-ui-autocomplete-to-the-wordpress-search-form/

and have it working like that fine. However, I am attempting to make this work to autocomplete based on the list from custom taxonomies I have created for a CPT. My search function looks like this,

function hbgr_search() {
        $term = strtolower( $_GET['term'] );
        $suggestions = array();

        $input_args = array(
            'post_type' => 'dealer-locator',
            'tax_query' => array(
                'relation' => 'AND',
                array(
                    'taxonomy' => 'zip_code',
                    'field'    => 'slug',
                    'terms'    => array( $term ),
                ),
                array(
                    'taxonomy' => 'city_served',
                    'field'    => 'slug',
                    'terms'    => array( $term ),
                ),
            ),
        );

        $loop = new WP_Query( $input_args );

        while( $loop->have_posts() ) {
            $loop->the_post();
            $suggestion = array();
            $suggestion['label'] = get_the_title();
            $suggestion['link'] = get_permalink();

            $suggestions[] = $suggestion;
        }

        wp_reset_query();

            $response = wp_json_encode( $suggestions );
            echo $response;
            exit();

}

JS Code:

(function( $ ) {
    $(function() {
        var url = MyAutocomplete.url + "?action=hbgr_search";
        $( "#search-dealer" ).autocomplete({
            source: url,
            delay: 300,
            minLength: 3
        });
    });

})( jQuery );

If I comment out my PHP line of $loop = .... and replace with this

$loop = new WP_Query( 's=' . $term );

Then the ajax autocomplete works fine (if I search for a post or page) so I know it is getting loaded right, just something funky with my tax queries?

I took the WP_Query section and tested it in its own file to be sure it worked, and it does.

EDIT: If I change my function to this, it works as well, by returning a list with whatever I type in the search box...

$suggestions = array();
$suggestion['label'] = $_GET['term'];
$suggestion['link'] = 'http://google.com';
$suggestions[] = $suggestion;

$response = wp_json_encode( $suggestions );
echo $response;
exit();

Thank you.

  • Please also add your ajax code to question. You should split it up. First use only PHP to make sure your query works. Then use ajax without PHP, just return a simple string or integer to make sure ajax works and only then put them together. If it still returns nothing, you've probably got a format / encoding problem. Let me know how it goes. – N00b Dec 18 '15 at 2:44
  • Is $_GET['term'] filled? I can not see how you send the term query var in the ajax request. – cybmeta Dec 18 '15 at 8:01
  • Yes it is getting filled – thatryan Dec 18 '15 at 17:14
  • Sorry, I've checked and it is auto-sent by jquery-autocomplete script. – cybmeta Dec 18 '15 at 19:46
2

The logic in the tax query is very unlikely to verify true.

Look at it:

'tax_query' => array(
    'relation' => 'AND',
                  array(
                     'taxonomy' => 'zip_code',
                     'field'    => 'slug',
                     'terms'    => array( $term ),
                  ),
                  array(
                     'taxonomy' => 'city_served',
                     'field'    => 'slug',
                     'terms'    => array( $term ),
                  ),
),

If you read the tax query, it says: get posts that have assigned the same value ($term) in zip_code and city_served taxonomies.

Note that you have set the AND relation between both taxonomies and use the same $term variable for both. It is very unlikely a zip code and a city name has the same value.

Maybe you want this other logic:

'tax_query' => array(
    'relation' => 'OR',
                  array(
                     'taxonomy' => 'zip_code',
                     'field'    => 'slug',
                     'terms'    => array( $term ),
                  ),
                  array(
                     'taxonomy' => 'city_served',
                     'field'    => 'slug',
                     'terms'    => array( $term ),
                  ),
),

Apart of that I don't see anything wrong in your code, although you are not showing the full code, so I can not been sure.

I've built a simple test using default post type, category and tag taxonomies ant it works:

PHP:

add_action( 'wp_ajax_hbgr_search', 'hbgr_search' );
add_action( 'wp_ajax_nopriv_hbgr_search', 'hbgr_search' );
function hbgr_search() {
        $term = strtolower( $_GET['term'] );
        $suggestions = array();

        $input_args = array(
            'post_type' => 'post',
            'tax_query' => array(
                'relation' => 'OR',
                array(
                    'taxonomy' => 'category',
                    'field'    => 'slug',
                    'terms'    => array( $term )
                ),
                array(
                    'taxonomy' => 'post_tag',
                    'field'    => 'slug',
                    'terms'    => array( $term )
                ),
            ),
        );

        $loop = new WP_Query( $input_args);

        while( $loop->have_posts() ) {
            $loop->the_post();
            $suggestion = array();
            $suggestion['label'] = get_the_title();
            $suggestion['link'] = get_permalink();

            $suggestions[] = $suggestion;
        }

        wp_reset_postdata();

        $response = wp_send_json( $suggestions );

}

add_action( 'wp_enqueue_scripts', 'add_scripts' );
function add_scripts() {
    wp_enqueue_script( 'jquery' );
    wp_enqueue_script( 'jquery-ui-autocomplete' );
    wp_register_style( 'jquery-ui-styles','http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css' );
    wp_enqueue_style( 'jquery-ui-styles' );
    wp_register_script( 'my-autocomplete', plugin_dir_url( __FILE__ ) . 'my-autocomplete.js', array( 'jquery', 'jquery-ui-autocomplete' ), '1.0', false );
    wp_localize_script( 'my-autocomplete', 'MyAutocomplete', array( 'url' => admin_url( 'admin-ajax.php' ) ) );
    wp_enqueue_script( 'my-autocomplete' );
}

JavaScript (my-autocomplete.js):

(function( $ ) {
    $(function() {
        var url = MyAutocomplete.url + "?action=hbgr_search";
        $( "#search-dealer" ).autocomplete({
            source: url,
            delay: 300,
            minLength: 3
        });
    });

})( jQuery );

Search form:

<form method="get" action="<?php echo esc_url( home_url( '/' ) ); ?>" role="search">
    <input id="search-dealer" type="search" placeholder="Search" name="s">
    <button type="submit">Submit</button>
</form>
  • Great catch yeah I saw that last night as well and tried it, but still no luck! – thatryan Dec 18 '15 at 17:13
  • Apart of that I don't see anythin wrong in your code. I've edited the answer; sample working code added. – cybmeta Dec 18 '15 at 20:12

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.