javascript - 获取选择选项的值，然后用它来搜索/过滤

标签 javascript jquery html

我有一个搜索页面，搜索结果显示在这个页面上。

进入搜索页面后，会出现一个搜索框和一个类别过滤器。

当我在过滤器中选择一个选项时，它应该通过 JavaScript 自动搜索而不刷新页面。我希望这个用户友好且尽可能轻便。

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;
    }
<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>
    <!--            <div class="search-x">&#215;</div>-->
  </form>
  <hr>
  <div class="cw-70">


    <h1>SEARCH RESULTS</h1>
    <!--        <h1>Search by: "-->
    <!--"</h1>-->
    <!--        -->
    <!--                <div class="searching-item">-->
    <!--                    <a href="-->
    <!--"> <h3>-->
    <!--</h3></a>-->
    <!--                    -->
    <!--                </div>-->
    <!--                -->
    <!--            <div class="searching-item"> <h3>Nothing found</h3></div>-->
    <!--            -->
    <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 O​​parison</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>

我目前面临的问题是，每次我选择一个过滤器选项时，我都需要点击搜索按钮来显示结果，它也会刷新页面。我需要它是自动的，无需重新加载页面。

下面是我想使用的 js，但它没有用。任何让它发挥作用的帮助都将不胜感激。

当前的 url 格式是 example.com?s=SEARCH-STRING&c=value

值应来自下拉选项以供引用

$('#searchselect').change(function (e) {
            var searchText = $('#searchQuery').val();
            var section = $(this).val();

            if (section != '') {
                var hash = '?s=' + global + '&c=' + section  ;
                window.location.hash = hash;
            } else {
                var hash = '?s=' + global + '&c=' + section ;
                window.location.hash = hash;
            }
        });

最佳答案

客户端

$('#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 O​​parison</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>

服务器端

<?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&nbsp;'; echo get_search_query(). '&nbsp; &mdash; &nbsp; ('; echo $wp_query->found_posts.') &nbsp; 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
    // ...

关于javascript - 获取选择选项的值，然后用它来搜索/过滤，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/51821801/

上一篇：javascript - KoaJS ctx.redirect() 在 Chrome 中导致 ERR_TOO_MANY_REDIRECTS

下一篇：javascript - bootstrap modal 显示先前调整大小的 textarea

相关文章：

html - 悬停在使用位置 : absolute? 的按钮上不起作用

javascript - jQuery .hover 和 .mouseleave 意外循环。我该如何解决

javascript - 为什么套接字连接计数器不更新？

javascript - Node.js 和 Jake - 如何在任务中同步调用系统命令？

javascript - 如何在 bootstrap div 顶部显示按钮？

javascript - Laravel:在 ajax 请求 session 过期后重定向到登录

javascript - 使用 javascript 和 html 创建测验，但我的 javascript 测验内容没有出现在 html 中

javascript - 使用 ember 添加 Dropbox 选择器

javascript - 一个简单的 javascript 正则表达式反向引用

javascript - 什么时候使用 jQuery isImmediatePropagationStopped() 方法？

©2024 IT工具网  联系我们