table with search

by Rohit Bisht

HTML

<div class="one_way_form">
  <ul>
    <li>
      <div class="tableWithSearch" id="tableWithSearch_ID_1">
      </div>
    </li>
    <li>
      <div class="tableWithSearch" id="tableWithSearch_ID_2">
      </div>
    </li>
    <li>
      <input type="text" id="depart_date" placeholder="Departure Date">
    </li>
    <li>
      <input type="text" id="return_date" placeholder="Return Date">
    </li>
    <li>
      <div class="tableWithSearch" id="tableWithSearch_ID_3">
      </div>
    </li>
    <li>
      <input id="search_one_way" type="submit" value="Search">
    </li>
  </ul>
</div>


<!-- jQuery library -->
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>


</script>

CSS

.tableWithSearch {
  width: 100%;
  position: relative;
}

.tableWithSearchBar {
  width: 100%;
  height: 100%;
  position: relative;
  left: 0;
  z-index: 200;
}

.tableWithSearchTable {
  position: absolute;
  width: 100%;
  opacity: 1;
  max-height: 150px;
  overflow-y: scroll;
  z-index: 1000;
  display: none;
  background: #fff;
}

.input_tableWithSearchBar {
  background-repeat: no-repeat;
  width: 100%;
  font-size: 12px;
  padding: 6px;
  border: 1px solid #ddd;
  margin-bottom: 0px;
}

.table_tableWithSearchTable {
  border-collapse: collapse;
  width: 100%;
  border: 1px solid #ddd;
  font-size: 1em;
}

.table_tableWithSearchTable th,
.table_tableWithSearchTable td {
  text-align: left;
  padding: 3px;
}

.table_tableWithSearchTable tr {
  border-bottom: 1px solid #ddd;
}

.hoveredRow {
  background-color: red;
}

* {
  box-sizing: border-box;
}

.no_results_row {
  display: none;
}

.selected a {
  background-color: #ff4242;
  font-weight: bold;
}

/* form properties */

input {
  background-repeat: no-repeat;
  width: 100%;
  font-size: 12px;
  padding: 6px;
  border: 1px solid #ddd;
  margin-bottom: 0px;
}

.one_way_form ul li {
  padding: 5px;
  list-style-type: none;
}

.one_way_form ul {
  padding: 0px;
}

.ui-datepicker {
  z-index: 300 !important;
}

JavaScript

$(document).ready(function() {
  $("#depart_date").datepicker({
    format: "dd/mm/yyyy",
    minDate: 0,
    maxDate: "+6M",
    onSelect: function(dateText) {
      $('#return_date').datepicker("option", "minDate", this.value);
      next_index($("#depart_date"));
    }
  });
  $('#return_date').datepicker({
    format: "dd/mm/yyyy",
    minDate: 0,
    maxDate: "+6M",
    onSelect: function(dateText) {
    	next_index($("#return_date"));
    }
  });
});
var jsondata = {
  "divId": "tableWithSearch_ID_1",
  "tableId": "myTable",
  "inputId": "myInput",
  "placeholder": "Origin City",
  "inputProvider": [
    "Germany", "India", "USA", "Sweden", "Canada", "Sri_Lanka", "Italy", "Germany", "India", "USA", "Sweden", "Canada", "Sri_Lanka", "Italy", "Germany", "India", "USA", "Sweden", "Canada", "Sri_Lanka", "Italy", "Germany", "India", "USA", "Sweden", "Canada", "Sri_Lanka", "Italy", "Germany", "India", "USA", "Sweden", "Canada", "Sri_Lanka", "Italy"
  ]
};
var jsondata1 = {
  "divId": "tableWithSearch_ID_2",
  "tableId": "myTable1",
  "inputId": "myInput1",
  "placeholder": "Destination City",
  "inputProvider": [
    "India2", "USA2", "Sweden2", "Canada2", "Sri_Lanka2", "Italy2", "Germany2", "Canada2", "Sri_Lanka2", "Italy2", "Germany2", "India2", "USA2", "Sweden2", "Canada2", "Sri_Lanka2", "Italy2"
  ]
};
var jsondata2 = {
  "divId": "tableWithSearch_ID_3",
  "tableId": "myTable2",
  "placeholder": "Passengers",
  "inputId": "myInput2",
  "inputProvider": [
    "1", "2", "3", "4", "5", "6", "7", "8"
  ]
};

createTable(jsondata);
createTable(jsondata1);
createTable(jsondata2);
$(":input:not(:hidden)").each(function(i) {
  $(this).attr('tabindex', i + 1);
});

function createTable(jsonData) {
  var table_id = "";
  var input_id = "";
  table_id = jsonData.tableId;
  input_id = jsonData.inputId;
  var div_part = "<div class='tableWithSearchBar'><input class='input_tableWithSearchBar' type='text' id='" + input_id + "' placeholder='" + jsonData.placeholder + "'...