0

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();
}

?>
4
  • 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? Oct 25, 2012 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">​ ] Oct 25, 2012 at 16:38
  • So you are returning a text input in the PHP function called by your AJAX? Oct 25, 2012 at 17:03
  • Yes, you are correct. Oct 25, 2012 at 17:03

1 Answer 1

0

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.

6
  • .suggest I believe works with a js called suggest.js Oct 25, 2012 at 17:36
  • Yeah I'm not sure the point of having the extra suggest.js plugin when you don't need it though. Oct 25, 2012 at 17:53
  • Regardless, within this suggest function, you will receive the proper values that the get_results query will generate. Oct 25, 2012 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. Oct 25, 2012 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. Oct 25, 2012 at 19:57

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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