javascript - Filter.js 如何在初始化时过滤 jquery UI slider

Question

Filter.js有一个filter_on_init:true，但我不知道如何使jQuery UI slider filter_on_init。目前， slider 按照编程的方式过滤变化。

一个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

我找到了解决方法。初始化后需要触发 slider 变化函数。

// 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')
});