Coding Cheatsheets - Learn web development code and tutorials for Software developers which will helps you in project. Get help on JavaScript, PHP, XML, and more.

Post Page Advertisement [Top]

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_autocomplete' );
}

Now add script for Autocomplete

jQuery("#destination_id").autocomplete({
source: function(req, response){
jQuery.ajax({
type: 'POST',
dataType: 'json',
url: jqueryAutocomplete.ajaxurl,
data: 'action=wpyog_search_program&term='+req.term,
success: function(data) {
response(jQuery.map(data, function (item) {
return {
label: item.name,
value: item.id
};
}));
}
});
},
select: function(event, ui) {
jQuery("#destination_id").val(ui.item.label); 
jQuery("#program_id").val(ui.item.value); 
return false;
// save selected id to hidden input
},
minLength: 3
});

Create action inside functions.php or inside your plugin code.

add_action('wp_ajax_nopriv_wpyog_search_program', 'wpyog_search_program');
add_action('wp_ajax_get_wpyog_search_program', 'wpyog_search_program');
function wpyog_search_program(){
global $wpdb;
$suggestions=array();
$search_key = $_REQUEST['term'];
$table_trips = $wpdb->prefix . "wpyog_trips"; // Use custom table for data fetch
    $tripRows = $wpdb->get_results("SELECT id, title, description from $table_trips where title like '%$search_key%' or description like '%$search_key%'");
foreach($tripRows as $row){
$suggestion = array();
        $suggestion['id'] = $row->id;
        $suggestion['name'] = (!empty($row->title))?$row->title:$row->description;
$suggestions[]= $suggestion;
}  
    echo json_encode($suggestions);
    // Don't forget to exit!
    exit;
}

4 comments:

  1. thank u blogger

    ReplyDelete
  2. Hi, Great.. Tutorial is just awesome..It is really helpful for a newbie like me.. I am a regular follower of your blog. Really very informative post you shared here. Kindly keep blogging.Nice post.Thank you so much for sharing.Yiioverflow is a web development company.We have well expert team in Angular JS, Ionic, Yii Framework, Node JS, Laravel, PHP, MySQL, and WordPress.If you want a developer visit.. https://yiioverflow.com/

    ReplyDelete
  3. Hi, Great.. Tutorial is just awesome..It is really helpful for a newbie like me.. I am a regular follower of your blog. Really very informative post you shared here. Kindly keep blogging.Nice post.Thank you so much for sharing.Yiioverflow is a web development company.We have well expert team in Angular JS, Ionic, Yii Framework, Node JS, Laravel, PHP, MySQL, and WordPress.If you want a developer visit.. https://yiioverflow.com/

    ReplyDelete

Bottom Ad [Post Page]