0.0.20 add autocomplete for search in input

static/css/styles.css

@@ -942,4 +942,54 @@ form.new_route{
 
 
 
-/*Range slider end*/
+/*Range slider end*/
+
+/*autocomplete-wrapper START*/
+.form-group {
+  margin-bottom: 20px;
+}
+.control-label {
+  display: block;
+}
+
+.autocomplete-wrapper {
+  position: relative;
+
+}
+.autocomplete-results {
+  position: absolute;
+  background: white;
+  z-index: 1;
+  top: 100%;
+  left: 0;
+  font-size: 13px;
+  border: solid 1px #ddd;
+  border-top-width: 0;
+  border-bottom-color: #ccc;
+  box-shadow:
+    0 5px 10px rgba(0, 0, 0, 0.2);
+}
+
+.autocomplete-result {
+  padding: 12px 15px;
+  border-bottom: solid 1px #eee;
+  cursor: pointer;
+}
+
+.autocomplete-result:last-child {
+  border-bottom-width: 0;
+}
+
+.autocomplete-location {
+  opacity: .8;
+  font-size: smaller;
+}
+
+
+  .autocomplete-results[data-highlight='#{$i}'] > :nth-child(#{$iPlus}) {
+    color: white;
+    background: #26C9FF;
+    border-bottom-color: #26C9FF;
+    outline: solid 1px #26C9FF;
+  }
+/*autocomplete-wrapper END*/

static/js/autocomplete.js

@@ -0,0 +1,147 @@
+// var options = {
+//   shouldSort: true,
+//   threshold: 0.4,
+//   maxPatternLength: 32,
+//   keys: [{
+//     name: 'iata',
+//     weight: 0.5
+//   }, {
+//     name: 'name',
+//     weight: 0.3
+//   }, {
+//     name: 'city',
+//     weight: 0.2
+//   }]
+// };
+//
+// var fuse = new Fuse(airports, options)
+
+function searchTown(el){
+    let form = el.form;
+    let formData = new FormData(form);
+
+    $.ajax({
+        headers: { "X-CSRFToken": $('input[name=csrfmiddlewaretoken]').val() },
+        url: '/ru/routes/create_route/',
+        type: "POST",
+        // async: true,
+        cache: false,
+        processData: false,
+        contentType: false,
+        // enctype: 'json',
+        data: formData,
+        success: function(data){
+            console.log('data received')
+            // location.href = '/profile'
+            document.querySelector(".info_profile").innerHTML = data.html
+        },
+        error: function (data, exception){
+            document.querySelector(".button_register").innerHTML = data.responseJSON.html
+        }
+    });
+}
+
+var ac = $('#id_from_country')
+  .on('click', function(e) {
+    e.stopPropagation();
+  })
+  .on('focus keyup', search)
+  .on('keydown', onKeyDown);
+
+var wrap = $('<div>')
+  .addClass('autocomplete-wrapper')
+  .insertBefore(ac)
+  .append(ac);
+
+var list = $('<div>')
+  .addClass('autocomplete-results')
+  .on('click', '.autocomplete-result', function(e) {
+    e.preventDefault();
+    e.stopPropagation();
+    selectIndex($(this).data('index'));
+  })
+  .appendTo(wrap);
+
+$(document)
+  .on('mouseover', '.autocomplete-result', function(e) {
+    var index = parseInt($(this).data('index'), 10);
+    if (!isNaN(index)) {
+      list.attr('data-highlight', index);
+    }
+  })
+  .on('click', clearResults);
+
+function clearResults() {
+  results = [];
+  numResults = 0;
+  list.empty();
+}
+
+function selectIndex(index) {
+  if (results.length >= index + 1) {
+    ac.val(results[index].iata);
+    clearResults();
+  }
+}
+
+var results = [];
+var numResults = 0;
+var selectedIndex = -1;
+
+function search(e) {
+  if (e.which === 38 || e.which === 13 || e.which === 40) {
+    return;
+  }
+
+  if (ac.val().length > 0) {
+    // results = _.take(fuse.search(ac.val()), 7);
+    // numResults = results.length;
+
+     results = searchTown.success(data);
+
+    var divs = results.map(function(r, i) {
+        return '<div class="autocomplete-result" data-index="'+ i +'">'
+             + '<div><b>'+ r.iata +'</b> - '+ r.name +'</div>'
+             + '<div class="autocomplete-location">'+ r.city +', '+ r.country +'</div>'
+             + '</div>';
+     });
+
+    selectedIndex = -1;
+    list.html(divs.join(''))
+      .attr('data-highlight', selectedIndex);
+
+  } else {
+    numResults = 0;
+    list.empty();
+  }
+}
+
+function onKeyDown(e) {
+  switch(e.which) {
+    case 38: // up
+      selectedIndex--;
+      if (selectedIndex <= -1) {
+        selectedIndex = -1;
+      }
+      list.attr('data-highlight', selectedIndex);
+      break;
+    case 13: // enter
+      selectIndex(selectedIndex);
+      break;
+    case 9: // enter
+      selectIndex(selectedIndex);
+      e.stopPropagation();
+      return;
+    case 40: // down
+      selectedIndex++;
+      if (selectedIndex >= numResults) {
+        selectedIndex = numResults-1;
+      }
+      list.attr('data-highlight', selectedIndex);
+      break;
+
+    default: return; // exit this handler for other keys
+  }
+  e.stopPropagation();
+  e.preventDefault(); // prevent the default action (scroll / move caret)
+}

static/js/newRoute.js

@@ -14,6 +14,20 @@ function createRoute(){
             console.log('data received')
             // location.href = '/profile'
             document.querySelector(".info_profile").innerHTML = data.html
+
+            //get dynamic value
+            // let fromCountry = document.getElementById('id_from_country');
+            // let toCounytry = document.getElementById('id_to_country')
+            //
+            // toCounytry.oninput = function (){
+            //     console.log(toCounytry.value)
+            // }
+            // fromCountry.oninput = function (){
+            // console.log(fromCountry.value)
+//
+// };
+
+
         }
     });
 }

static/js/rangeSlider.js

@@ -0,0 +1,52 @@
+
+
+$(document).ready(function (e){
+    $('#id_weight').ionRangeSlider({
+            skin: "round",
+            type: "single",
+            min: 0,
+            max: 1000,
+            from: 0,
+            step: 1,
+            grid: true,
+            grid_num: 5,
+        });
+
+});
+
+
+
+
+//
+// var RangeSlider = function () {
+//
+// 	// Private functions
+// 	var demos = function () {
+// 		// basic demo
+// 		$('#id_weight').ionRangeSlider({
+//             skin: "round",
+//             type: "single",
+//             min: 0,
+//             max: 1000,
+//             from: 0,
+//             step: 1,
+//             grid: true,
+//             grid_num: 5,
+//         });
+//
+// 	}
+//
+// 	return {
+// 		// public functions
+// 		init: function() {
+// 			demos();
+// 		}
+// 	};
+// }();
+//
+// jQuery(document).ready(function() {
+// 	RangeSlider.init();
+// });
+
+
+

static/js/sendRoute.js

@@ -16,11 +16,13 @@ function sendRoute(el){
         success: function(data){
             console.log('data received')
             // location.href = '/profile'
-            // document.querySelector(".info_profile").innerHTML = data.html
+            document.querySelector(".info_profile").innerHTML = data.html
         },
         error: function (data, exception){
-            document.querySelector(".new_route").innerHTML = data.responseJSON.html
+            document.querySelector(".button_register").innerHTML = data.responseJSON.html
         }
     });
 }
 
+
+