Get The Value Of Selection Option And Then Use It To Search/filter
I have a search page, after i search the result is displayed on this page. After i get on search page there is a search box and a category filter. When i select a option in filter
Solution 1:
Client side
$('#searchselect').on('change', function(event) {
event.preventDefault();
var searchText = $('input[name=s]').val();
var section = $(this).val();
var query_params = '?s=' + searchText + '&c=' + section;
// send ajax request to avoid page reload
$.ajax({
url: 'http://realbusinessanalytics.com' + query_params,
type: 'GET',
dataType: 'html',
beforeSend: function() {
$('.search-results-wrapper').html('<h2>Please wait...</h2><hr>');
}
})
.done(function(results) {
$('.search-results-wrapper').html(results);
// update the url
window.history.pushState({},"", query_params);
});
});form {
margin-bottom: 30px;
color: #243b5e;
min-width: 900px;
}
form input {
background-color: #f6f6f6 !important;
padding: 15px 55px 15px 40px !important;
border-radius: 3px !important;
color: #243b5e;
font-size: 25px;
font-weight: 700;
}
.top-search .searching-word {
background: rgba(255, 255, 255, 0);
border: 0;
width: 75%;
padding: 10px 10px 10px 20px;
}
form .search-button-wrapper {
top: 4px;
left: -50px;
position: relative;
}
form .search-select {
margin-top: 30px;
display: inline-block;
vertical-align: middle;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-ms-border-radius: 5px;
-o-border-radius: 5px;
border-radius: 5px;
background: #f0f0f0;
border: 0;
padding: 15px;
width: 250px;
font-size: 15px;
color: #243b5e;
}<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
<div class="cw-wrapper">
<form action="http://realbusinessanalytics.com" method="get" class="top-search">
<input class="searching-word" name="s" placeholder="Search LBS by … " value="global" type="text">
<a href="#" class="search-button-wrapper">
<button class="search-button">
<svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" viewBox="0 0 16 16">
<g fill="none" fill-rule="evenodd" stroke="#3B465C" stroke-width="1.3" transform="translate(1 1)">
<circle cx="5.5" cy="5.5" r="5.5"></circle>
<path stroke-linecap="round" d="M9.5 9.5l4.528 4.528"></path>
</g>
</svg>
</button>
</a>
<select name="c" id="searchselect" class="search-select">
<option class="search-placeholder" value="" disabled="" selected="">ALL RESULTS</option>
<option value="59">Accounting, Finance and Economics</option>
<option value="26">Advisory Board</option>
<option value="34">Alumni Team</option>
<option value="43">Business and economic outlook</option>
<option value="78">Business Ethics</option>
<option value="39">Case analysis</option>
<option value="65">Executive Programmes</option>
<option value="73">Faculty directory profiles</option>
<option value="82">Finance</option>
<option value="56">General Management Programme</option>
<option value="18">In the Media</option>
<option value="38">LBS Insight</option>
<option value="61">Marketing and Sales Management</option>
<option value="19">News</option>
<option value="57">Open Seminars</option>
<option value="60">Operations and Management Information System</option>
<option value="63">Personal Leadership and Human Resources Management</option>
<option value="17">Press Releases</option>
<option value="89">Research news</option>
<option value="64">Sector Specific</option>
<option value="62">Strategy, Innovation and Governance</option>
<option value="1">Uncategorized</option>
</select>
</form>
<hr>
<div class="cw-70">
<h1>SEARCH RESULTS</h1>
<div class="searching-item">
<a href="http://realbusinessanalytics.com/f_r_colade_team/%e2%80%8bogechi-adeola/">
<h3>Ogechi Adeola</h3>
</a>
</div>
<div class="searching-item">
<a href="http://realbusinessanalytics.com/f_r_colade_team/%e2%80%8bdavid-west-olayinka/">
<h3>Olayinka David-West</h3>
</a>
</div>
<div class="searching-item">
<a href="http://realbusinessanalytics.com/f_r_colade_team/udoji-uchora/">
<h3>Uchora Udoji</h3>
</a>
</div>
<div class="searching-item">
<a href="http://realbusinessanalytics.com/f_r_colade_team/akin-o%e2%80%8b%e2%80%8bparison/">
<h3>Akin Oparison</h3>
</a>
</div>
<div class="searching-item">
<a href="http://realbusinessanalytics.com/f_r_colade_team/emenalo-chukwunonye%e2%80%8b/">
<h3>Chukwunonye Emenalo</h3>
</a>
</div>
<div class="searching-item">
<a href="http://realbusinessanalytics.com/f_r_colade_team/omoregie-kayode/">
<h3>Kayode Omoregie</h3>
</a>
</div>
<div class="searching-item">
<a href="http://realbusinessanalytics.com/f_r_colade_team/okonedo-enase/">
<h3>Enase Okonedo</h3>
</a>
</div>
<div class="searching-item">
<a href="http://realbusinessanalytics.com/f_r_colade_team/onwuegbuzie-henrietta/">
<h3>Henrietta Onwuegbuzie</h3>
</a>
</div>
<div class="searching-item">
<a href="http://realbusinessanalytics.com/f_r_colade_team/ogunyemi-kemi/">
<h3>Kemi Ogunyemi</h3>
</a>
</div>
<div class="searching-item">
<a href="http://realbusinessanalytics.com/f_r_colade_team/owolabi-akintola/">
<h3>Akintola Owolabi</h3>
</a>
</div>
</div>
</div>
</body>
</html>Server side
<?php
// Check if the request is an Ajax request
if ( !empty($_SERVER['HTTP_X_REQUESTED_WITH']) && strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest' ): ?>
<h2>
<?php global $wp_query; echo 'Search Result for '; echo get_search_query(). ' — ('; echo $wp_query->found_posts.') results found.'; ?>
</h2>
<hr>
<?php
if (have_posts()) :
while (have_posts()) : the_post(); ?>
<div class="searching-item">
<a href="<?php the_permalink(); ?>"><h3><?php the_title(); ?></h3></a>
<?php the_excerpt(); ?>
</div>
<?php endwhile;
else: ?>
<div class="searching-item"><h3>Nothing found</h3></div>
<?php else: ?>
// If the request is not an Ajax request (GET request)
// show the page
// ...
Solution 2:
Try using ajax call to fill data in search results like below in 'searchselect' change event with proper conditions:
$.ajax
({
type: "POST",
url: "http://realbusinessanalytics.com" + "?s=" + global + "&c=" + section,
success: function(data){
"Write you custom code here"
}});
Append "data" to whatever element you want to fill
This will not load the page and get the data as well.
Post a Comment for "Get The Value Of Selection Option And Then Use It To Search/filter"