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

Question

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

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

Colour Size Price 

Blue S £45 

Blue L £98 

Red  S £65 

Red  L £31 

Так я тогда есть несколько выпадающие на странице

Colour: Blue, Red 

Size: Small, Large 

Так что - я хочу знать ... учитывая «Синий + Малый», что цена

Я понятия не имею, в каком порядке выпадающие в, или порядок, в котором цвет и размер вытягивают из Базы Данных

Данные в JavaScript может быть массивом, как это:

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

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

Answer 1

Возможно, это?

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 

Answer 2

Наиболее распространенным решением для этого является просто цикл по массиву в стиле 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(matched_filter(filter, item){ 
     filtered_items.push(item); 
    } 
} 

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

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

Answer 3

Вы можете проиндексировать цены в двумерной карте при загрузке страницы (с рабочим 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) Инициализация выбирает (населяющие значения и событие 'изменение'):

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, чтобы открыть консоль View).

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

console.log(map); 

Только цена 'Blue' & 'Малый':

console.log(map['Blue']['Small']); // outputs: 45