Here’s my code thanks to the people from this forum that helped me finish it.
Feel free to use it.
Functions.php
add_action('wp_ajax_data_fetch' , 'data_fetch');
add_action('wp_ajax_nopriv_data_fetch','data_fetch');
function data_fetch()
{
$post_ids = array(2438, 379, 2729, 2571, 1830, 1832, 1819, 1824, 1826, 2415, 1828, 3155, 2752);
$the_query = new WP_Query(array(
'posts_per_page' => -1,
's' => esc_attr($_POST['keyword'] ),
'post_type' => 'page',
'post__not_in' => $post_ids
) );
if( $the_query->have_posts() ) :
while( $the_query->have_posts() ): $the_query->the_post();?>
<div class="DisplayLiveSearchItems">
<img src="" style="width:35px;height:25px;position:relative;float:left;padding-right:1%"/><a href="<?php echo esc_url( get_permalink() ); ?>"><?php the_title();?></a>
</div>
<?php endwhile;
wp_reset_postdata();
endif;
die();
}
Javascript file ( You can name it whatever you want )
function fetch(){
jQuery.ajax({
url: "https://www.yourwebsite.com/wp-admin/admin-ajax.php",
type : "POST",
data: { action: 'data_fetch', keyword: jQuery('#keyword').val() },
success: function(data) {
if ( jQuery('#keyword').val() == "" )
{
jQuery('#datafetch').html("");
}
else
{
jQuery('#datafetch').html( data );
}
}
});
};
The page you want the search form to be used at:
<input type="text" class="demoInputBox" name="keyword" id="keyword" placeholder="Search" onkeyup="fetch()"/>
<div id="datafetch">Your search results will appear here</div>
Style.css
.demoInputBox
{
padding: 10px;
width:40%;
border: 0;
border-radius: 15px;
margin: 0px 5px 15px;
}
.DisplayLiveSearchItems
{
font-size:20px;
width:25%;
position:relative;
border:3px double rgba(28,110,164,0.9);
font-family:sans seriff;
}
-
This reply was modified 6 years, 11 months ago by
halohtlo.