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 urlwindow.history.pushState({},"", query_params);
});
});form {
margin-bottom: 30px;
color: #243b5e;
min-width: 900px;
}
forminput {
background-color: #f6f6f6!important;
padding: 15px55px15px40px!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: 10px10px10px20px;
}
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><scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script></head><body><divclass="cw-wrapper"><formaction="http://realbusinessanalytics.com"method="get"class="top-search"><inputclass="searching-word"name="s"placeholder="Search LBS by … "value="global"type="text"><ahref="#"class="search-button-wrapper"><buttonclass="search-button"><svgxmlns="http://www.w3.org/2000/svg"width="25"height="25"viewBox="0 0 16 16"><gfill="none"fill-rule="evenodd"stroke="#3B465C"stroke-width="1.3"transform="translate(1 1)"><circlecx="5.5"cy="5.5"r="5.5"></circle><pathstroke-linecap="round"d="M9.5 9.5l4.528 4.528"></path></g></svg></button></a><selectname="c"id="searchselect"class="search-select"><optionclass="search-placeholder"value=""disabled=""selected="">ALL RESULTS</option><optionvalue="59">Accounting, Finance and Economics</option><optionvalue="26">Advisory Board</option><optionvalue="34">Alumni Team</option><optionvalue="43">Business and economic outlook</option><optionvalue="78">Business Ethics</option><optionvalue="39">Case analysis</option><optionvalue="65">Executive Programmes</option><optionvalue="73">Faculty directory profiles</option><optionvalue="82">Finance</option><optionvalue="56">General Management Programme</option><optionvalue="18">In the Media</option><optionvalue="38">LBS Insight</option><optionvalue="61">Marketing and Sales Management</option><optionvalue="19">News</option><optionvalue="57">Open Seminars</option><optionvalue="60">Operations and Management Information System</option><optionvalue="63">Personal Leadership and Human Resources Management</option><optionvalue="17">Press Releases</option><optionvalue="89">Research news</option><optionvalue="64">Sector Specific</option><optionvalue="62">Strategy, Innovation and Governance</option><optionvalue="1">Uncategorized</option></select></form><hr><divclass="cw-70"><h1>SEARCH RESULTS</h1><divclass="searching-item"><ahref="http://realbusinessanalytics.com/f_r_colade_team/%e2%80%8bogechi-adeola/"><h3>Ogechi Adeola</h3></a></div><divclass="searching-item"><ahref="http://realbusinessanalytics.com/f_r_colade_team/%e2%80%8bdavid-west-olayinka/"><h3>Olayinka David-West</h3></a></div><divclass="searching-item"><ahref="http://realbusinessanalytics.com/f_r_colade_team/udoji-uchora/"><h3>Uchora Udoji</h3></a></div><divclass="searching-item"><ahref="http://realbusinessanalytics.com/f_r_colade_team/akin-o%e2%80%8b%e2%80%8bparison/"><h3>Akin Oparison</h3></a></div><divclass="searching-item"><ahref="http://realbusinessanalytics.com/f_r_colade_team/emenalo-chukwunonye%e2%80%8b/"><h3>Chukwunonye Emenalo</h3></a></div><divclass="searching-item"><ahref="http://realbusinessanalytics.com/f_r_colade_team/omoregie-kayode/"><h3>Kayode Omoregie</h3></a></div><divclass="searching-item"><ahref="http://realbusinessanalytics.com/f_r_colade_team/okonedo-enase/"><h3>Enase Okonedo</h3></a></div><divclass="searching-item"><ahref="http://realbusinessanalytics.com/f_r_colade_team/onwuegbuzie-henrietta/"><h3>Henrietta Onwuegbuzie</h3></a></div><divclass="searching-item"><ahref="http://realbusinessanalytics.com/f_r_colade_team/ogunyemi-kemi/"><h3>Kemi Ogunyemi</h3></a></div><divclass="searching-item"><ahref="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 requestif ( !empty($_SERVER['HTTP_X_REQUESTED_WITH']) && strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest' ): ?><h2><?phpglobal$wp_query; echo'Search Result for '; echo get_search_query(). ' — ('; echo$wp_query->found_posts.') results found.'; ?></h2><hr><?phpif (have_posts()) :
while (have_posts()) : the_post(); ?><divclass="searching-item"><ahref="<?php the_permalink(); ?>"><h3><?php the_title(); ?></h3></a><?php the_excerpt(); ?></div><?phpendwhile;
else: ?><divclass="searching-item"><h3>Nothing found</h3></div><?phpelse: ?>
// 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"