根據來自ajax響應的輸入接受其他用戶輸入

Question

我正在從用戶那里得到2個輸入：

1. 區域
2. 時間

基於這些，我在顯示當時該區域現有的餐廳。 我還想顯示那些餐廳提供的所有美食，作為復選框。 然后，用戶可以從那些復選框中進行選擇，餐廳也可以根據美食進行過濾。

我面臨的問題是，在顯示這些餐廳提供的所有美食之后，我無法找到一種方法來根據這些美食來更改結果。

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

Answer 1

只需確保您的原始對象具有關於每個餐廳的美食的相關信息，然后您就可以根據過濾器中是否包含特定選項來過濾向用戶顯示的選項。 由於隱藏/顯示選項不需要任何服務器介入，因此不需要其他AJAX請求。

這個jsfiddle演示展示了一種簡單過濾餐廳列表的方法（使用一些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>');
        }
    }
}​