简体   繁体   English

根据来自ajax响应的输入接受其他用户输入

[英]Accepting additional user inputs based on input from ajax response

I am taking 2 inputs from a user: 我正在从用户那里得到2个输入:

  1. area 区域
  2. time 时间

Based on these, I am displaying the available restaurants in that area at that time . 基于这些,我在显示当时区域现有的餐厅。 I also want to display all the cuisines that those restaurants serve, as checkboxes. 我还想显示那些餐厅提供的所有美食,作为复选框。 Then, the user can select from those check boxes and the restaurants can be filtered according to the cuisine as well. 然后,用户可以从那些复选框中进行选择,餐厅也可以根据美食进行过滤。

The problem I am facing is that after I display all the cuisines that those restaurants serve, I am not able to find a way to change the results based on those cuisines. 我面临的问题是,在显示这些餐厅提供的所有美食之后,我无法找到一种方法来根据这些美食来更改结果。

Can this be solved by creating 2 xmlhttpreq objects? 是否可以通过创建2个xmlhttpreq对象来解决? Please give me suggestions. 请给我建议。

Just make sure that your original object has the relevant information about each restaurant's cuisine, then you can just filter which options you display to the user based on whether or not they include a particular option in the filter. 只需确保您的原始对象具有关于每个餐厅的美食的相关信息,然后您就可以根据过滤器中是否包含特定选项来过滤向用户显示的选项。 Since hiding/showing an option doesn't need any server involvement, there is no need for another AJAX request. 由于隐藏/显示选项不需要任何服务器介入,因此不需要其他AJAX请求。

This jsfiddle demo shows one way of simply filtering the restaurant list (using a little jQuery). 这个jsfiddle演示展示了一种简单过滤餐厅列表的方法(使用一些jQuery)。 The DOM manipulation is fairly basic though, and the change event can be readily emulated in native JS if you don't want to use 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>');
        }
    }
}​

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM