¿Hay una manera simple de crear una tabla de búsqueda de JavaScript?

Question

Estoy buscando una forma simple de buscar un valor, usando javascript, contra un número de dimensiones:

por ejemplo. (Voy a utilizar los productos y opciones de productos para describir esto, los datos proviene de una base de datos en un formato muy similar)

Colour Size Price 

Blue S £45 

Blue L £98 

Red  S £65 

Red  L £31 

Por lo tanto, a continuación, tienen una serie de menús desplegables en la página

Colour: Blue, Red 

Size: Small, Large 

por lo tanto - quiero saber ... dada "Blue + Pequeño", lo que el precio es

no tengo idea de qué orden los menús desplegables están en, o el orden en el que el color y se extraen del base de datos

Los datos de Javascript pueden ser un array de esta manera:

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

Es un ejemplo crudo, pero no pueden hacer ejercicio una manera fácil de lograr esto en javascript.

Answer 1

Esto tal vez?

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

La solución más común es hacer un bucle sobre la matriz, en el estilo 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); 
    } 
} 

El razonamiento detrás de la fuerza bruta es que si usted tiene un conjunto de datos que es lo suficientemente grande como para requerir un mejor algoritmo, entonces hay una buena probabilidad de que lo mejor sería enviar sólo la consulta de nuevo al servidor y Haga que su base de datos haga el trabajo duro por usted.

Para obtener un ejemplo más completo, puede marcar this code en el kit de herramientas de Dojo.

Answer 3

Puede indexar los precios en un mapa bidimensional en la carga de la página (con trabajo fiddle).

1) Puedo poner los valores selectos de búsqueda mesas en caso de tener que cargar previamente ellos:

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

2) Aquí está la tabla de precios en forma matricial:

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) La inicialización selecciona (valores y 'cambios' en caso de que pueblan):

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) la indexación de su tabla de precios:

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 función (en el cambio de selección):

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) Depuración (F12 golpe en Chrome o Firefox para abrir la vista de consola).

completa tabla indexada:

console.log(map); 

Sólo el precio del 'Azul' & 'Pequeño':

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