title: Handsontable Replace autocomplete values with key before posting
body: <p>I am using HandsOnTable to make editing database tables more interactive on my site.</p>
  
  <p>HandsOnTable fulfils nearly all my requirements except that some columns in my database actually store foreign keys rather than local string values.</p>
  
  <p>In the UI I would like these columns to appear as dropdown menus where the user selects a readable value mapped to the previously mentioned foreign key (I.e. something like an HTML name/value <code>select</code>).</p>
  
  <p>Unfortunately HandsOnTable does not have such a cell type. The closest thing to it is <code>autocomplete</code>. This allows me to create a dropdown, but it only contains values; no corresponding keys. Here is how it is created:</p>
  
  <pre><code>"source": ["Jebediah", "Bob", "Bill", "Buzz"]
  </code></pre>
  
  <p>So what I am planning is to send two Json strings from the server:</p>
  
  <p>One containing the parameters needed by HandsOnTable to render the table:</p>
  
  <pre><code>{
      "data": [
          { "ID": 1, "Description": "Crude", "Volume": 204, "Customer": "jebediah" },
          { "ID": 2, "Description": "Hidrogen", "Volume": 513, "Customer": "Bob" },
          { "ID": 3, "Description": "Coal", "Volume": '67', "Customer": "Bill" },
          { "ID": 4, "Description": "Wood", "Volume": '513',  "Customer": "Buzz" }
      ],
      "columns": [
          { "data": "ID", "type": "numeric" },
          { "data": "Description", "type": "text"},
          { "data: "Volume", "type": "numeric" },
          { "data": "color", "type": "autocomplete", "strict": "true",
              "source": ["Jebediah", "Bob", "Bill", "Buzz"]}
      ]
  }
  </code></pre>
  
  <p>The second mapping keys to values</p>
  
  <pre><code>{
      "mappings": [
          {"key": 0, "value": "Jebediah"}, 
          {"key": 0, "value": "Bob"},
          {"key": 0, "value": "Bill"}, 
          {"key": 0, "value": "Buzz"}
      ]
  }
  </code></pre>
  
  <p>So far so good. Now for the tricky part:</p>
  
  <p>HandsOnTable has a function (<code>getData()</code>) that allows me to retrieve the tables data as a Json string ready to be sent back to the server:</p>
  
  <pre><code>var jdata = myHandsOnTable.getData();
  </code></pre>
  
  <p>Where jdata would look something like this:</p>
  
  <pre><code>"data": [
      { "ID": 1, "Description": "Crude", "Volume": 204, "Customer": "jebediah" },
      { "ID": 2, "Description": "Hidrogen", "Volume": 513, "Customer": "Bob" },
      { "ID": 3, "Description": "Coal", "Volume": '67', "Customer": "Bill" },
      { "ID": 4, "Description": "Wood", "Volume": '513',  "Customer": "Buzz" }
  ]
  </code></pre>
  
  <p>Now before posting, I would like to replace that values for the <code>Customer</code> node with their matching pair key within the <code>mappings</code> json string.</p>
  
  <p>How can I best achieve this in JavaScript/JQuery? </p>
  
  <p>Is there a function that works something as follows?:</p>
  
  <pre><code>jdata.replaceNode('node', mappings)
  </code></pre>
  
  <p>Thanks</p>