MAAC inv table - with Chosen

MAAC inv table - with Chosen

by pj_js15

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.1.0/chosen.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.1.0/chosen.jquery.min.js"></script>
<script src="http://labo.tristan-jahier.fr/chosen_order/chosen.order.jquery.min.js"></script>
<table class="investment-options">
  <tr>
    <th>Product name</th>
    <th>Amount invested $</th>
    <th>% of portfolio</th>
    <th>Management Cost %</th>
    <th>&nbsp;</th>
  </tr>
  <tr class="odd">
    <td>Sample Investment Option (001)</td>
    <td>
      <input type="text" class="txt-amount-inv" />
    </td>
    <td>0%</td>
    <td>1.14% <i class="fa fa-info-circle info" aria-hidden="true"></i></td>
    <td><i class="fa fa-trash-o delete" aria-hidden="true"></i></td>
  </tr>
  <tr class="even">
    <td>Another Investment Option (002)</td>
    <td>
      <input type="text" class="txt-amount-inv" />
    </td>
    <td>0%</td>
    <td>1.14% <i class="fa fa-info-circle info" aria-hidden="true"></i></td>
    <td><i class="fa fa-trash-o delete" aria-hidden="true"></i></td>
  </tr>
  <tr class="odd">
    <td class="search-container" colspan="5">
      <input type="text" class="txt-search-inv-opt" placeholder="Begin typing to search" />
      <select name="fruits" class="chosen" multiple style="width: 500px;">
        <option value="banane">Banane</option>
        <option value="pomme">Pomme</option>
        <option value="poire">Poire</option>
        <option value="ananas">Ananas</option>
        <option value="kiwi">Kiwi</option>
        <option value="goyave">Goyave</option>
        <option value="abricot">Abricot</option>
        <option value="fraise" selected>Fraise</option>
        <option value="framboise">Framboise</option>
        <option value="avocat" selected>Avocat</option>
    </select>
    </td>
  </tr>
  <tr class="last-row">
    <td>Total</td>
    <td>$0</td>
...

CSS

* {
  font-family: Arial;
  font-size: 13px;
}

table.investment-options {
  border-collapse: collapse;
  width: 100%;
}

th,
.last-row td {
  background-color: #007ACC;
  color: #FFF;
  padding: 10px 20px;
}

td {
  text-align: center;
  padding: 10px;
}

tr.odd{
  background-color: #FFF;
}
tr.even{
  background-color: #F9F9F9;
}

table tr th {}

.txt-amount-inv {
  margin: 0 auto;
  padding: 10px;
  width: 80px;
}

i.info{
  color: #007ACC;
}
i.delete{
  color: #B0B0B0;
  font-size: 16px;
}

.txt-search-inv-opt {
  padding: 10px;
  width: 96%;
}

.search-container {
  padding: 10px;
}

JavaScript

$(document).ready(function() {
    // Chosenify every multiple select DOM elements with class 'chosen'
    //$('select.chosen').chosen();

		$("select.chosen").chosen().change( 
    	function(){
      	//alert('new item chosen! update the table above');
        console.log('new item chosen! update the table above');
      }
    );

    // Get a reference to the DOM element
    var MY_SELECT = $('select[multiple].chosen').get(0);

    $('#get-order').click(function() {
        var selection = ChosenOrder.getSelectionOrder(MY_SELECT);

        $('#order-list').empty();
        $(selection).each(function(i) {
            $('#order-list').append("<li>" + selection[i] + "</li>");
        });
    });

    $('#set-order').click(function() {
        ChosenOrder.setSelectionOrder(MY_SELECT, $('#input-order').val().split(','), true);
    });
    
    
    
});