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

【问题标题】：Get the value of selection option and then use it to search/filter获取选择选项的值，然后使用它来搜索/过滤
【发布时间】：2018-08-13 11:55:59
【问题描述】：

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

我进入搜索页面后，有一个搜索框和一个类别过滤器。

当我在过滤器中选择一个选项时，它应该通过 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，但它没有用。任何帮助使其工作将不胜感激。

当前网址格式为 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;
            }
        });

【问题讨论】：

  • 你找到你想要的解决方案了吗？
  • @chebaby 不，你能帮帮我吗？
  • 我很乐意帮助你@Nimesh
  • @chebaby 请在下面查看我的评论，并附上您答案的截图
  • @chebaby 你能根据我在你回答中附加的评论编辑你的代码吗

标签： javascript jquery html


【解决方案1】：

客户端

$('#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
    // ...

【讨论】：

  • 不点击不过滤，请检查
  • 我发现了一些可以帮助您修复它的东西，当我点击下拉菜单时，它会添加我们不需要的额外参数，请查看此链接prnt.sc/ki4jn6
  • 我用你给的js试过了，请在realbusinessanalytics.com/?s=global点击下拉菜单查看结果，没有任何反应，搜索结果保持不变
  • 我检查了请再次检查 url realbusinessanalytics.com/?s=global 以了解它是如何工作的，它会刷新页面，我不需要刷新页面。请帮帮我
  • 其实这不是“传统”的重载，反正我知道你想达到什么，我会帮你的。你想要的是只刷新搜索结果部分而不重新加载整个页面。但事情是这样的，ajax 请求返回的查询结果正在发送整个 html 页面，这就是你认为页面正在重新加载的原因。我希望你做的是创建一个只发送搜索结果而不是整个页面的入口点。
【解决方案2】：

尝试使用 ajax 调用在搜索结果中填充数据，如下所示，在 'searchselect' 更改事件中使用适当的条件：

$.ajax ({
类型：“POST”，
url: "http://realbusinessanalytics.com" + "?s=" + global + "&c=" + section,
成功：函数（数据）{
"Write you custom code here"
}});

将“数据”附加到您要填充的任何元素
这也不会加载页面并获取数据。

【讨论】：

  • jsfiddle.net/xpvt214o/605309 请根据您的要求进行更改；这仅用于演示目的。对于上面的问题，将您的 ajax 数据附加到“cw-70”类中。
  • 抱歉，什么不起作用，ajax 调用或附加数据或我的链接的逻辑？
  • 请检查下面的答案他很接近但有点错误
  • 尝试清空 ajax.done 函数中的 query_params 值。我认为您会错误地将该变量声明为全局变量。对于按钮单击，如果您愿意，您可以在搜索框文本更改事件而不是下拉更改事件上调用该函数。
  • 你能解决这个问题并写一个工作代码吗，我是ajax新手
猜你喜欢
  • 2021-11-11
  • 2014-06-02
  • 1970-01-01
  • 2014-05-14
  • 1970-01-01
  • 2018-04-08
  • 2017-09-01
  • 2018-11-02
  • 1970-01-01
相关资源
最近更新 更多
热门标签
Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode