Filter.js如何在初始化时过滤jquery UI滑块

Question

Filter.js有一个filter_on_init：true，但我不确定如何使jQuery UI滑块filter_on_init。目前滑块过滤器按照编程进行更改。

A CodePen is set up to demonstrate。我不想显示所有数据点的原因是因为我有8,000+点。使用过滤器可以让我只显示其中的一些点。

$(document).ready(function(){ 

    renderCategories(); 
    initInputs(); 

    var place = places[0]; 
    GoogleMap.init(place.coordinate.latitude, place.coordinate.longitude, places); 

    var afterFilter = function(result){ 
    $('#total_places').text(result.length); 
    GoogleMap.updateMarkers(result); 
    } 

    afterFilter(places); 

    //search: {ele: '#searchbox', fields: ['runtime']}, // With specific fields 
    var FJS = FilterJS(places, '#places', { 
    template: '#place-template', 
    filter_on_init: true,//This is not filtering the #rating_slider presets below in the initInputs function. 
    search: {ele: '#searchbox', fields: ['name', 'categories', 'address']}, 
    callbacks: { 
     afterFilter: afterFilter 
    } 
    }); 

    FJS.addCriteria({field: 'rating', ele: '#rating_filter', type: 'range'}); 
    FJS.addCriteria({field: 'county', ele: '#county_criteria input:checkbox', all: 'all'}); 
    FJS.addCriteria({field: 'categories', ele: '#categories_criteria input:checkbox', all: 'all'}); 

    window.FJS = FJS; 
}); 

function initInputs(){ 
    $("#rating_slider").slider({ 
    min: 4.0, 
    max: 5.0, 
    values:[4.75,5.0], 
    step: 0.1, 
    range:true, 
    slide: function(event, ui) { 
     $("#rating_range_label").html('Filter by ratings between ' + ui.values[ 0 ] + ' and ' + ui.values[ 1 ]); 
     $('#rating_filter').val(ui.values[0] + '-' + ui.values[1]).trigger('change'); 
    } 
    }); 

    $('#county_criteria :checkbox').prop('checked', true); 
    $('#categories_criteria :checkbox').prop('checked', true); 

    $('#all_counties').on('click', function(){ 
    $('#county_criteria :checkbox').prop('checked', $(this).is(':checked')); 
    }); 

    $('#all_categories').on('click', function(){ 
    $('#categories_criteria :checkbox').prop('checked', $(this).is(':checked')); 
    }); 
} 

function renderCategories(){ 
    var categories = ["Falafel", "Vegan", "Paleo", "Pizza", "Caterers", "Salad"]; 

    var html = $('#category-template').html(); 
    var templateFn = FilterJS.templateBuilder(html) 
    var container = $('#categories_criteria'); 

    $.each(categories, function(i, c){ 
    container.append(templateFn({ name: c, value: c })) 
    }); 
} 


var GoogleMap = { 

    map: null, 
    markers: {}, 

    init: function(lat, lng, places){ 
    var self = this; 
    var mapOptions = { 
     zoom: 12, 
     center: new google.maps.LatLng(lat, lng) 
    }; 

    this.map = new google.maps.Map(document.getElementById('map'), mapOptions); 
    this.infowindow = new google.maps.InfoWindow({ size: new google.maps.Size(50,50) }); 

    $.each(places, function(){ 
     self.addMarker(this); 
    }); 

    this.setCenterPoint(); 
    }, 


    addMarker: function(place){ 
    var self = this; 

var icons = { 

     path: "M-20,0a20,20 0 1,0 40,0a20,20 0 1,0 -40,0", 
     fillColor: place.color, 
     fillOpacity: 0.6, 
     anchor: new google.maps.Point(0,0), 
     strokeWeight: 0, 
     scale: 0.2 
    } 


    var marker = new google.maps.Marker({ 
     position: new google.maps.LatLng(place.coordinate.latitude, place.coordinate.longitude), 
     icon: icons, 
     map: self.map, 
    }); 

    marker.info_window_content = place.name + '<br/>' + place.address 
    self.markers[place.id] = marker; 

    google.maps.event.addListener(marker, 'click', function() { 
     self.infowindow.setContent(marker.info_window_content) 
     self.infowindow.open(self.map,marker); 
    }); 

    }, 


    updateMarkers: function(records){ 
    var self = this; 

    $.each(self.markers, function(){ this.setMap(null); }) 
    $.each(records, function(){ 
     self.markers[this.id].setMap(self.map); 
    }); 

    //Set map center 
    if(records.length) self.setCenterPoint(); 
    }, 

    setCenterPoint: function(){ 
    var lat = 0, lng = 0; count = 0; 

    //Calculate approximate center point. 
    for(id in this.markers){ 
     var m = this.markers[id]; 

     if(m.map){ 
     lat += m.getPosition().lat(); 
     lng += m.getPosition().lng(); 
     count++; 
     } 
    } 

    if(count > 0){ 
     this.map.setCenter(new google.maps.LatLng(lat/count,lng/count)); 
    } 
    } 

}; 

Answer 1

我找到了解决办法。您需要在初始化后触发滑块更改功能。

// Create the slider 
$("#rating_slider").slider({ 
min: 4.0, 
max: 5.0, 
values: [4.75, 5.0], 
step: 0.1, 
range: true, 
slide: function(event, ui) { 
    $("#rating_range_label").html('Filter by ratings between ' + ui.values[0] + ' and ' + ui.values[1]); 
    $('#rating_filter').val(ui.values[0] + '-' + ui.values[1]).trigger('change'); 
}}); 

// Trigger the slider (add for each additional slider) 
$rating_slider = $("#rating_slider"); 
$rating_slider.slider('option', 'slide')(null, { 
    values: $rating_slider.slider('values') 
});