多过滤器 Mapbox（搜索和菜单）

Question

我有一个 mapbox 地图，我可以根据搜索框和菜单按钮进行过滤，但一次只能使用其中一个。

我有一张带有 JSON 数据的地图，其中包括提供的服务类型（菜单过滤器）和提供服务的县（搜索框过滤器）。我需要它才能工作，以便在菜单上进行过滤不会取消搜索框过滤器，反之亦然。我一直在试图弄清楚如何将两者结合起来，但收效甚微。我还在 [此处][1] 之类的列表中显示过滤器的结果。非常感谢任何帮助。谢谢你。下面是我的过滤器代码。

$('#search').keyup(search);
function search() {
    listings.innerHTML = '';

    // get the value of the search input field

    var searchString = $('#search').val().toLowerCase();
   $('#search').addClass('active').siblings().removeClass('active');

   locations.setFilter(showState);

// here we're simply comparing the 'county' property of each marker
// to the search string, seeing whether the former contains the latter.

   function showState(feature) {
    return feature.properties.county
        .toLowerCase()
        .indexOf(searchString) !== -1;
};
return false;
}

$('.menu-uiA a').on('click', function() {
    listings.innerHTML = '';

    // For each filter link, get the 'data-filter' attribute value.

    var filter = $(this).data('filter');
    $(this).addClass('active').siblings().removeClass('active');
    locations.setFilter(function(f) {

    // If the data-filter attribute is set to "all", return
    // all (true). Otherwise, filter on markers that have
    // a value set to true based on the filter name.

    return (filter === 'all') ? true : f.properties[filter] === true;
  });
return false;
});

Answer 1

为什么不引入一个统一的 SetFilterState 函数，它由 #search 上的 keyup 或菜单上的 click 触发，它整合了搜索条件的所有条件你需要传递给setFilter？所以只有一个地方设置了实际的过滤器状态。

Answer 2

我能够将搜索和菜单过滤器与下面的代码结合起来。

var searchString = $('#search').val().toLowerCase();                     
var filter = $('.menu-uiA a').data('filter');  

function combined_filter(f) {
    return ((f.properties.county
     .toLowerCase()
     .indexOf(searchString) !== -1) && ((filter === 'all') ?
true :f.properties[filter] === true))
};  

 $('#search').keyup('search', function() {
listings.innerHTML = '';
searchString = $('#search').val().toLowerCase();    

locations.setFilter(combined_filter);

return false;
});

 $('.menu-uiA a').on('click', function() {
listings.innerHTML = '';
filter = $(this).data('filter');
$(this).addClass('active').siblings().removeClass('active');

locations.setFilter(combined_filter);

return false;
});

多过滤器 Mapbox（搜索和菜单）

Multiple Filters Mapbox (search and menu)

javascript

filter

mapbox