接受基於從Ajax響應

Question

我從用戶服用2個輸入輸入附加的用戶輸入：

1. 區域
2. 時間

基於這些，我顯示地區在那時間。我也想顯示這些餐廳所服務的所有菜餚，如複選框。然後，用戶可以從這些複選框中進行選擇，並且餐廳也可以根據美食進行過濾。

我面對的問題是，在我展示這些餐廳所服務的所有菜餚後，我無法找到改變基於這些菜餚的結果的方式。

這可以通過創建2個xmlhttpreq對象來解決嗎？請給我建議。

Answer 1

只要確保您的原始對象具有有關每個餐廳美食的相關信息，那麼您可以根據是否在過濾器中包含特定選項來過濾顯示給用戶的選項。由於隱藏/顯示選項不需要任何服務器參與，因此不需要另一個AJAX請求。

This jsfiddle demo顯示了簡單過濾餐館列表（使用一個小jQuery）的一種方法。 DOM操作雖然相當基本，但如果不想使用jQuery，則可以在原生JS中輕鬆模擬change事件。

var time = "8:00pm"; 
var parameters = { 
    area: 1, 
    time: time 
}; 

// Initially only r1, r2, r5 shown 
var restaurants = { 
    r1: { name:"One", cuisine: "Thai", area: "1", time: time }, 
    r2: { name:"Two", cuisine: "Chinese", area: "1", time: time}, 
    r3: { name:"Three", cuisine: "American", area: "2", time: time }, 
    r4: { name:"Four", cuisine: "Mediterranean", area: "1", time: "9:00pm"}, 
    r5: { name:"Five", cuisine: "American", area: "1", time: time } 
}; 

$(document).ready(function() { 
    parameters.cuisine = $('input[name="cuisine"]:checked').map(function() { 
     return $(this).val(); 
    }).toArray(); 

    writeRestaurants(); 

    $('input[name="cuisine"]').change(function(){ 
     var $this = $(this); 
     var a = parameters.cuisine; 
     if($this.is(':checked')) { 
      a.push($this.val());   
     } 
     else { 
      var k = a.indexOf($this.val()); 
      a.splice(k, 1); 
     } 
     writeRestaurants(); 
    }); 
}); 

function writeRestaurants() { 
    $('#restaurants').empty(); 
    for (var i in restaurants) { 
     var include = true; 
     for (var param in parameters) { 
      if(param == 'cuisine'){ 
       if (parameters[param].indexOf(restaurants[i][param]) < 0) { 
        include = false; 
       } 
      } 
      else if (restaurants[i][param] != parameters[param]) { 
       include = false; 
      } 
     } 
     if (include) { 
      $('#restaurants').append('<p>'+restaurants[i].name+'</p>'); 
     } 
    } 
}​