2015-05-19 2 views
0

У меня есть карта, и я могу фильтровать на основе окна поиска и кнопок меню, но только один из них будет работать одновременно.Несколько фильтров 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; 
}); 

ответ

0

Почему бы не ввести единую SetFilterState функции, которая срабатывает либо из keyup на Проводить поиск или click на меню, которое консолидирует все условия критериев поиска, которые вы должны пройти setFilter? Так что есть только в одном месте, где задано фактическое состояние фильтра.

+0

Не могли бы вы предоставить конкретный пример? Я относительно новичок в javascript. – TWS

+0

любой шанс этого входить в jsfiddle, чтобы мы могли видеть больше структуры? – snkashis

0

Мне удалось объединить фильтры поиска и меню с кодом ниже.

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; 
}); 
Смежные вопросы