jQuery UI AutoComplete not working in wordpress?

2 Views

To use jQuery UI AutoComplete, I loaded the following scripts: 

wp_enqueue_script('jquery'); 
wp_enqueue_script('jquery-ui-core');
wp_enqueue_script('jquery-ui-widget'); 
wp_enqueue_script('jquery-ui-position');

wp_enqueue_style( 'jquery-ui-autocomplete',   $ul .'/css/jquery-ui-1.8.custom.css' );
wp_register_script('jquery-ui-autocomplete', $url .'/js/jquery-ui/jquery.ui.autocomplete.min.js', array( 'jquery-ui-widget', 'jquery-ui-position' ), '1.8.2', true );
wp_enqueue_script( 'jquery-ui-autocomplete', $url .'/js/jquery-ui/jquery.ui.autocomplete.min.js', '1.1', true );

After the above scripts, I loaded my own js which includes the following code:

Read More
$(function(){   
    $("#to").autocomplete({
        // code...
   });
});

Firebug shows all scripts and style are loaded and gives error message of “$ is not a function”. How can I correct this error?

Post Views: 2

Related posts

Leave a Reply

2 comments

  1. WordPress requires no conflict wrappers for jQuery.

    (function($){   
    $("#to").autocomplete({
        // code...
   });
})(jQuery);

    Or:

    jQuery(function(){   
    jQuery("#to").autocomplete({
        // code...
   });
});

  2. I use for wp_enqueue_scrip following one liner:

    wp_enqueue_script('jquery-ui-autocomplete', '', array('jquery-ui-widget', 'jquery-ui-position'), '1.8.6');

    As jquery-ui-autocomplete is part of the WP Framework -> see here

    In my coding I use the autocompletion feature the same way @Chris_O mentioned:

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

var availableTags = ["Batman", "Spiderman", "Hulk"];
            $( "#foo" ).autocomplete({
                source: availableTags
            });
    });

    To load so many scripts, like in your example is not neccessary, cause jquery is loaded by default from the wp framework. I would recommend to clean up your script initializing and reduce it to the min, load only the scripts you needed. Please take a look at the wp codex.