joe

by Joe

HTML

<!DOCTYPE html>
<html xml="http://www.w3.org/1999/xhtml">

  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta charset="ISO-8859-1">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>

    <title>UPS Application</title>

    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link href="css/landing-page.css" rel="stylesheet">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>

  </head>

  <body>

    <div class="container-fluid">
      <div class="row">
        <div class="col-md-12">
          <ul class="nav nav-tabs ">
            <li class="nav-item">
              <a class="nav-link active" href="#">Home</a>
            </li>
            <li class="nav-item">

              <a class="nav-link" href="/addTyler">Create</a>
            </li>
            <li class="nav-item dropdown ml-md-auto">
              <a class="nav-link dropdown-toggle" href="http://example.com" id="navbarDropdownMenuLink" data-toggle="dropdown">Account</a>
             ...

CSS

/* ------------------------------------------------------------------------ */
/* HEADERS */
/* ------------------------------------------------------------------------ */

h3 {
  margin-top: 30px;
}



/* ------------------------------------------------------------------------ */
/* MODAL */
/* ------------------------------------------------------------------------ */

.modal-dialog {
  overflow-y: initial !important
}

.modal-body {
  height: 250px;
  overflow-y: auto;
}

.selectConfig {
  margin: 0 auto 0 auto;
  /* Configures each select tag to be centered */
}

.form-control {
  margin: 20px auto 20px auto;
  /* Configures each select tag to have spacing on top and bottom  */
}


.modal-btn {
  background-color: #fff;
  color: #000;
  font-weight: 600;

}


/* ------------------------------------------------------------------------ */
/* SEARCH FIELD */
/* ------------------------------------------------------------------------ */

.filter-search {
  width: 100%;
}

.list-group {
  position: absolute;
  height: 600%;
  overflow: auto;
}

#search-row {
  width: 60%;
  margin: 3% 15% 3% auto;
}

#myInput {
  margin-top: 0;
}

JavaScript

$(document).ready(function() {

  $("#myList").toggle();

  $("#myInput").on("focus", function() {
    $("#myList").toggle();
  });

  $("#myInput").on("focusout", function() {
    // Here, it'll wait 100 miliseconds to hide the list.
    setTimeout(function() {
      $("#myList").toggle();
    }, 250);
  });

  $("#myInput").on("keyup", function() {
    var value = $(this).val().toLowerCase();

    $("#myList tr").filter(function() {
      $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
    });
  });

  // This is the code to populate the field after selecting an option.
  $("#myList tr").on("click", function() {
    var texto = $(this).text();
    $("#myInput").val(texto);
  });


});