C'è un modo semplice per creare una tabella di ricerca javascript?

Question

Sto cercando un modo semplice di cercare un valore, utilizzando javascript, rispetto a un numero di dimensioni:

es. (Ho intenzione di utilizzare prodotti e opzioni di prodotto per descrivere questo, i dati provengono da un database in un formato molto simile)

Colour Size Price 

Blue S £45 

Blue L £98 

Red  S £65 

Red  L £31 

Così ho poi un certo numero di menu a discesa sulla pagina

Colour: Blue, Red 

Size: Small, Large 

Così - voglio sapere ... data "Blue + Small", ciò che il prezzo è

non ho idea di quale ordine menu di scorrimento sono, o l'ordine in cui il colore e le dimensioni sono tirati dal database

I dati in javascript possono essere un array come questo:

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

Si tratta di un esempio di greggio, ma non posso lavorare fuori un modo semplice per raggiungere questo obiettivo in javascript.

Answer 1

Questo forse?

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 soluzione più comune a questo è semplicemente il looping sull'array, in stile 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); 
    } 
} 

Il ragionamento dietro il bruto costringendo è che se si dispone di un insieme di dati che è grande abbastanza da richiedere un algoritmo migliore, allora c'è una buona probabilità che sarebbe stato meglio per inviare solo la query al server e avere il suo database fare il duro lavoro per te.

Per un esempio più completo è possibile controllare this code dal Dojo Toolkit.

Answer 3

È possibile indicizzare i prezzi in una mappa bidimensionale al caricamento della pagina (con lavoro fiddle).

1) ho messo i valori selezionati in di ricerca-tabelle nel caso in cui si deve precaricare loro:

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

2) Qui è la vostra tabella dei prezzi in forma di matrice:

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) L'inizializzazione seleziona (che popolano i valori e 'cambiamento' evento):

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) consente di ordinare la tabella dei prezzi:

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 Funzione (su selezionare cambio):

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) Debug (colpo F12 in Chrome o Firefox per aprire vista Console).

tabella indicizzata completa:

console.log(map); 

solo il prezzo di 'Blue' & 'Piccolo':

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