获取选择选项的值,然后使用它来搜索/过滤
我有一个搜索页面,搜索结果后显示在此页面上。
在我进入搜索页面后,有一个搜索框和一个类别filter。
当我在filter中选择一个选项时,它应该通过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; }
我目前面临的问题是每次我选择一个filter选项时,我需要点击搜索按钮来显示结果,它也会刷新页面。 我需要它是自动的,没有页面重新加载。
下面是我想要使用的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('Please wait...
'); } }) .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; }
尝试使用ajax调用来填充搜索结果中的数据,如下所示,在’searchselect’更改事件中使用适当的条件:
$ .ajax({
类型:“POST”,
url:“ http://realbusinessanalytics.com ”+“?s =”+ global +“&c =”+ section,
成功:函数(数据){
"Write you custom code here"
}});
将“数据”附加到您要填充的任何元素
这不会加载页面并获取数据。