Есть ли простой способ создать таблицу поиска javascript? - PullRequest
Новая
       29

Есть ли простой способ создать таблицу поиска javascript?

10 голосов
/ 25 января 2012

Я ищу простой способ поиска значения, используя javascript, по ряду измерений:

например.(Я собираюсь использовать продукты и параметры продукта, чтобы описать это, данные поступают из базы данных в очень похожем формате) 

Colour  Size Price

Blue    S    £45

Blue    L    £98

Red     S    £65

Red     L    £31

Итак, у меня есть несколько выпадающих списков на странице 

Colour: Blue, Red

Size:   Small, Large

Итак - я хочу знать ... учитывая "Blue + Small", какова цена

Я понятия не имею, в каком порядке выпадающие списки или в каком цветеи Size извлекаются из базы данных

Данные в javascript могут быть массивом, подобным этому: 

{Colour:Blue, Size:Medium, Price:48},{Colour:Blue, Size:Large, Price:82}

Это грубый пример, но я не могу найти простой способ достичьэто в JavaScript.

Ответы [ 3 ]

11 голосов
/ 29 апреля 2015

Вы можете индексировать цены в двумерной карте при загрузке страницы (с рабочей fiddle ).

1) Я помещаю выбранные значения в таблицы поиска на случай, если вам придется предварительно загрузитьих: 

var tables = {
    Colour: ["Blue", "Red"],
    Size: ["Small", "Medium", "Large"]
};

2) Вот ваша таблица цен в виде массива: 

var array = [
    {Colour: "Blue", Size: "Small", Price: 45},
    {Colour: "Blue", Size: "Medium", Price: 48},
    {Colour: "Blue", Size: "Large", Price: 98},
    {Colour: "Red", Size: "Small", Price: 65},
    {Colour: "Red", Size: "Large", Price: 31}
];

3) Инициализация выбора (заполнение значений и события 'change'): 

for (var key in tables)
    if (tables.hasOwnProperty(key)) {
        selects[key] = form[key];
        selects[key].addEventListener("change", updateSpan);

        var values = tables[key];
        len = values.length;
        for (i = 0; i < len; i++) {
            var option = document.createElement('option');
            option.appendChild(document.createTextNode(values[i]));
            form[key].appendChild(option);
        }
    }

4) Индексация таблицы цен: 

len = array.length;
for (i = 0; i < len; i++) {
    var record = array[i];

    if (typeof map[record.Colour] === 'undefined')
        map[record.Colour] = {};

    map[record.Colour][record.Size] = record.Price;
}

5) Функция updateSpan (при выбранном изменении): 

function updateSpan() {
    var Colour = selects.Colour.options[selects.Colour.selectedIndex].value;
    var Size = selects.Size.options[selects.Size.selectedIndex].value;

    if (typeof map[Colour] !== 'undefined' && typeof map[Colour][Size] !== 'undefined')
        span.textContent = map[Colour][Size];
    else
        span.textContent = "Price not defined to Colour: " + Colour + " and Size: " + Size + ".";
}

6) Отладка (нажмите F12 в Chrome или Firefox, чтобыоткройте Console View).

Полный индексированный стол: 

console.log(map);

Только цена «Blue» и «Small»: 

console.log(map['Blue']['Small']); // outputs the value: 45
7 голосов
/ 25 января 2012

Это может быть? 

var data = {
  1: {
    2: {
      3: 45
    }
  },
  2: {
    2: {
      3: 98
    }
  }
};

console.log(data[1][2][3]); // 45
console.log(data[2][2][3]); // 98

// or
var A = 1, B = 2, C = 3;
console.log(data[A][B][C]); // still 45
6 голосов
/ 25 января 2012

Наиболее распространенным решением этой проблемы является просто зацикливание массива в стиле O (N). 

var filter = {Colour: 'blue', Size:'small'};
function matches_filter(filter, item){
    //you can also have variations on this function that
    //allow for functions, regexes or anything you like in the filter...
    for(var key in filter){
        if Object.prototype.hasOwnProperty.call(filter, key){
            if(item[key] !== filter[key]){
                return false;
            }
        }
    }
    return true;
}

var filtered_items = [];
for(var i=0; i<items.length; i++){
    var item = items[i];
    if(matches_filter(filter, item)){
        filtered_items.push(item);
    }
}

Причина грубого форсирования заключается в том, что если у вас достаточно большой набор данныхесли требуется лучший алгоритм, то есть большая вероятность, что лучше всего отправить запрос обратно на сервер и сделать так, чтобы его база данных выполнила за вас тяжелую работу.

Для более полного примера вы можете проверить этот код из инструментария Dojo.

...