Coding Cheatsheets - Learn to Code

How to Create a jquery-ui Autocomplete in wordpress. Autocomplete provides suggestions while you type into the text field. In Wordpress we fetch dynamically matched pattern. Include javascript and css files in header. Create action inside functions.php or inside plugin code. add_action('wp_head', 'custom_register_scripts'); function custom_register_scripts(){ wp_register_style( 'techsudhir_jquery_ui_css', plugin_dir_url(__FILE__) . 'css/jquery-ui.css', false,'1.0.0' ); wp_enqueue_style( 'techsudhir_jquery_ui_css' ); wp_register_script('techsudhir_jquery_ui_js',plugin_dir_url(__FILE__) . 'js/jquery-ui.js',array('jquery'),'1.1', false); wp_enqueue_script('techsudhir_jquery_ui_js'); wp_localize_script( 'techsudhir_autocomplete', 'jqueryAutocomplete', array( 'ajaxurl' => admin_url( 'admin-ajax.php' ) ) ); wp_enqueue_script( 'techsudhir_...

<link rel="stylesheet" type="text/css" href="/css/jquery.autocomplete.css" /> <script src="js/jquery/jquery-1.7.1.min.js"></script> <script src="js/jquery/jquery.ui.autocomplete.min.js"></script> jQuery autocomplete with jSON <script>var data = [ {"label" : "Aragorn"}, {"label" : "Arwen"}, {"label" : "Bilbo Baggins"}, {"label" : "Boromir"}, {"label" : "Frodo Baggins"}, {"label" : "Gandalf"}, {"label" : "Gimli"}, {"label" : "Gollum"}, {"label" : "Legolas"}, {"label" : "Meriadoc Merry Brandybuck"}, {"label" : "Peregrin Pippin Took"}, {"label" : "Samwise Gamgee"} ]; </script> <script> $(function() { $( ...