Scroll to top

How to use properly search ajax in wordpress?

use properly search ajax in wordpress


Use in html file 

<html>
<head>

<style>
.sec {
    width: 223px;
    height: 41px;
    border: 1px solid #54595f;
margin-bottom:4px;
}
</style>
<script src=”<?php echo plugin_dir_url(__FILE__);?>js/jquery.min.js” type=”text/javascript”></script>
<script>
jQuery(document).ready(function($){
$(“.filter”).bind(“keyup change”, function() {


var ajaxurl = $(“.ajaxurl”).val();
var bylocation = $(“#by-search”).val();

var data = {
‘action’: ‘showloactions’,
‘bylocation’: bylocation,
};

jQuery.post(ajaxurl, data, function(response) {
$(“.wrapper”).html(response);
console.log(response);

});
});
});
</script>
</head>
<body>
<form action=”” method=”post”>
<input type=”text” name=”search” class=”filter” id=”by-search”>
<input type=”hidden” class=”ajaxurl” value=”<?php echo admin_url( ‘admin-ajax.php’ ) ;?>”>

</form>
<div class=”wrapper”>

</div>
<?php
//showloactions();

      ?>
</body>
</html>

Use in main plugin file 

 function showloactions(){

 $bylocation = $_POST[‘bylocation’];
 if(!$bylocation == “”){
        global $wpdb;
        global $wpsite;
$lacationtable = $wpdb->prefix.$wpsite.”_locations”;
        $result = $wpdb->get_results ( “SELECT * FROM $lacationtable where address LIKE ‘%$bylocation%'” );
        foreach ( $result as $print )   {
         
?>
<div class=”sec”><?php echo $print->city; ?></div>
            <?php
}
}
else{

echo “Not Found”;

}

die();

}
add_action(‘wp_ajax_showloactions’, ‘showloactions’);
add_action(‘wp_ajax_nopriv_showloactions’, ‘showloactions’);


Leave a Reply

Your email address will not be published. Required fields are marked *