根据来自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>');
        }
    }
}​