added suggestions of places while entering locations #1445

plantrip.html

@@ -151,6 +151,49 @@
     .sec1{
       margin-top: 100px;
     }
+    .error-message {
+      color: red;
+      font-size: 14px;
+      margin-top: 5px;
+      display: none;
+    }
+
+
+    .autocomplete {
+      position: relative;
+      display: inline-block;
+      width: 100%;
+    }
+
+    .autocomplete-items {
+      position: absolute;
+      border: 1px solid #d4d4d4;
+      border-bottom: none;
+      border-top: none;
+      z-index: 99;
+      top: 100%;
+      left: 0;
+      right: 0;
+      max-height: 200px;
+      overflow-y: auto;
+      text-align: left;
+    }
+
+    .autocomplete-items div {
+      padding: 10px;
+      cursor: pointer;
+      background-color: #fff;
+      border-bottom: 1px solid #d4d4d4;
+    }
+
+    .autocomplete-items div:hover {
+      background-color: #e9e9e9;
+    }
+
+    .autocomplete-active {
+      background-color: DodgerBlue !important;
+      color: #ffffff;
+    }
   </style>
 
   <!-- sticky animation  -->
@@ -207,12 +250,15 @@
     </div>
   </nav>
 
+
   <div class="container sec1">
     <h1>Plan a Trip</h1>
     <form id="trip-form">
       <div class="form-group">
         <label for="destination">Destination</label>
-        <input type="text" id="destination" name="destination" required>
+        <div class="autocomplete">
+          <input type="text" id="destination" name="destination" required>
+        </div>
       </div>
       <div class="form-group">
         <label for="start-date">Start Date</label>
@@ -238,6 +284,7 @@ <h1>Plan a Trip</h1>
     </form>
     <div class="message" id="message"></div>
   </div>
+
   <div class="container trip-suggestions">
     <h1>Trip Suggestions</h1>
     <div class="trip-carousel" id="trip-carousel">
@@ -306,6 +353,94 @@ <h3>Thailand</h3>
 
     window.addEventListener('resize', updateCarousel);
     document.addEventListener('DOMContentLoaded', updateCarousel);
+
+
+
+
+    // Autocomplete functionality
+    function autocomplete(inp, arr) {
+      var currentFocus;
+      inp.addEventListener("input", function(e) {
+        var a, b, i, val = this.value;
+        closeAllLists();
+        if (!val) { return false; }
+        currentFocus = -1;
+        a = document.createElement("DIV");
+        a.setAttribute("id", this.id + "autocomplete-list");
+        a.setAttribute("class", "autocomplete-items");
+        this.parentNode.appendChild(a);
+        for (i = 0; i < arr.length; i++) {
+          if (arr[i].substr(0, val.length).toUpperCase() == val.toUpperCase()) {
+            b = document.createElement("DIV");
+            b.innerHTML = "<strong>" + arr[i].substr(0, val.length) + "</strong>";
+            b.innerHTML += arr[i].substr(val.length);
+            b.innerHTML += "<input type='hidden' value='" + arr[i] + "'>";
+            b.addEventListener("click", function(e) {
+              inp.value = this.getElementsByTagName("input")[0].value;
+              closeAllLists();
+            });
+            a.appendChild(b);
+          }
+        }
+      });
+      inp.addEventListener("keydown", function(e) {
+        var x = document.getElementById(this.id + "autocomplete-list");
+        if (x) x = x.getElementsByTagName("div");
+        if (e.keyCode == 40) {
+          currentFocus++;
+          addActive(x);
+        } else if (e.keyCode == 38) {
+          currentFocus--;
+          addActive(x);
+        } else if (e.keyCode == 13) {
+          e.preventDefault();
+          if (currentFocus > -1) {
+            if (x) x[currentFocus].click();
+          }
+        }
+      });
+      function addActive(x) {
+        if (!x) return false;
+        removeActive(x);
+        if (currentFocus >= x.length) currentFocus = 0;
+        if (currentFocus < 0) currentFocus = (x.length - 1);
+        x[currentFocus].classList.add("autocomplete-active");
+      }
+      function removeActive(x) {
+        for (var i = 0; i < x.length; i++) {
+          x[i].classList.remove("autocomplete-active");
+        }
+      }
+      function closeAllLists(elmnt) {
+        var x = document.getElementsByClassName("autocomplete-items");
+        for (var i = 0; i < x.length; i++) {
+          if (elmnt != x[i] && elmnt != inp) {
+            x[i].parentNode.removeChild(x[i]);
+          }
+        }
+      }
+      document.addEventListener("click", function (e) {
+        closeAllLists(e.target);
+      });
+    }
+
+    var destinations = [
+  "Agra", "Amritsar", "Andaman Islands", "Bangalore", "Chennai", "Darjeeling",
+  "Delhi", "Goa", "Hampi", "Hyderabad", "Jaipur", "Jaisalmer", "Kochi",
+  "Kolkata", "Leh", "Mumbai", "Munnar", "Mysore", "Ooty", "Pondicherry",
+  "Pushkar", "Ranthambore", "Rishikesh", "Shimla", "Udaipur", "Varanasi",
+  "Aizawl", "Alleppey", "Alwar", "Badrinath", "Bhubaneswar", "Bikaner",
+  "Chandigarh", "Chikmagalur", "Coorg", "Daman and Diu", "Dharamshala",
+  "Gangtok", "Gulmarg", "Haridwar", "Imphal", "Jabalpur", "Jodhpur", 
+  "Kanha National Park", "Kanyakumari", "Kaziranga National Park", "Khajuraho",
+  "Kodaikanal", "Konark", "Kovalam", "Lakshadweep", "Lonavala", "Mahabalipuram",
+  "Manali", "Mount Abu", "Munnar", "Nagaland", "Nainital", "Nashik", 
+  "Pahalgam", "Patna", "Ranchi", "Shillong", "Srinagar", "Surat", "Tawang", 
+  "Tirupati", "Trivandrum", "Ujjain", "Vadodara", "Varkala", "Vijayawada", 
+  "Ziro Valley", "Zanskar Valley"
+];
+
+    autocomplete(document.getElementById("destination"), destinations);
   </script>
 </body>
 </html>