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.

I have set a field to autocomplete/autosuggest but the drop down isn't appearing as I type. I can see the admin-ajax.php requests and the data returned in the Network tab of Chrome Developer Tools so that appears to be retrieving the suggestions fine. I'm not real sure how to troubleshoot this further, and sort the issue out.

The Javascript is as follows:

    <script type="text/javascript">
    var se_ajax_url = '<?php echo admin_url('admin-ajax.php'); ?>';

    jQuery(document).ready(function() {
        console.log(jQuery('#body-type').suggest(se_ajax_url + '?action=se_lookup'));
    });
    </script>

Below is the code I've added to wordpress:

<?php

add_action('wp_enqueue_scripts', 'se_wp_enqueue_scripts');
function se_wp_enqueue_scripts() {
wp_enqueue_script('suggest');
}

add_action('wp_head', 'se_wp_head');
function se_wp_head() {
?>
<script type="text/javascript">
    var se_ajax_url = '<?php echo admin_url('admin-ajax.php'); ?>';

    jQuery(document).ready(function() {
        console.log(jQuery('#body-type').suggest(se_ajax_url + '?action=se_lookup'));
    });
</script>
<?php
}

add_action('wp_ajax_se_lookup', 'se_lookup');
add_action('wp_ajax_nopriv_se_lookup', 'se_lookup');

function se_lookup() {
    global $wpdb;

    $search = like_escape($_REQUEST['q']);

    $query = 'SELECT DISTINCT meta_value FROM '.$wpdb->postmeta.'
        WHERE meta_value LIKE \''.$search.'%\'
        AND meta_key = \'machinery_bodyType\'
        LIMIT 5';

    foreach ($wpdb->get_results($query) as $row) {
        $value = $row->meta_value;
        echo $value."\n";
    }
    die();
}

?>
share|improve this question
    
On your success ajax function, console.log your result, and look in the Console tab - this is the tab you will find any JS errors in. Are you getting the expected return? –  Eric Holmes Oct 25 '12 at 14:25
    
I wrapped the jQuery in console.log and the following is what was displayed in the console: [ <input type=​"text" value=​"Tractors" name=​"body-type" id=​"body-type" size=​"9" class=​"required-field" autocomplete=​"off">​ ] –  Jerry Tunin Oct 25 '12 at 16:38
    
So you are returning a text input in the PHP function called by your AJAX? –  Eric Holmes Oct 25 '12 at 17:03
    
Yes, you are correct. –  Jerry Tunin Oct 25 '12 at 17:03
add comment

1 Answer

up vote 0 down vote accepted

I would use .ajax() instead of .suggest() in your jQuery.

jQuery.ajax({
    type : "post",
    url : myAjax.ajaxurl,
    data : {
        action: 'se_lookup',
    },
    success: function( result ) {
        console.log(result);
    }
});

You should now receive the values back from the SQL.

share|improve this answer
    
.suggest I believe works with a js called suggest.js –  Jerry Tunin Oct 25 '12 at 17:36
    
Yeah I'm not sure the point of having the extra suggest.js plugin when you don't need it though. –  Eric Holmes Oct 25 '12 at 17:53
    
Regardless, within this suggest function, you will receive the proper values that the get_results query will generate. –  Eric Holmes Oct 25 '12 at 17:54
    
Well the reason I asked is I wasn't sure how the code you suggested would do everything such as displaying the drop down and what not to select from. –  Jerry Tunin Oct 25 '12 at 17:58
    
The first issue to address it to gather the right information - you shouldn't be getting an input value with the current setup you have for your PHP function. –  Eric Holmes Oct 25 '12 at 19:57
show 1 more comment

Your Answer

 
discard

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

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