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
         }
     });
 }
 
+
+

templates/blocks/profile/b_new_route.html

@@ -1,5 +1,8 @@
 {% load static %}
 
+    <link rel="stylesheet" href="{% static 'css/ion.rangeSlider.min.css' %}">
+
+
 <form class = "new_route" name="new_route" method="post">
         {% csrf_token %}
   <div>
@@ -29,6 +32,7 @@
     <div>
     <label for="id_from_country">{{ form.fields.from_country.label }}</label>
     <input type="text" name="from_country"{% if form.fields.from_country.required %} required{% endif %} id="id_from_country">
+
     </div>
   <div>
     <label for="id_to_country">{{ form.fields.to_country.label }}</label>
@@ -77,9 +81,11 @@
 
 <hr>
 
-  <div>
+  <div class="range-slider">
     <label for="id_weight">{{ form.fields.weight.label }}</label>
-    <input type="range" name="weight"{% if form.fields.weight.required %} required{% endif %} value="" id="id_weight">
+      <input type="text" id="id_weight"{% if form.fields.weight.required %} required{% endif %} name="weight" value="" />
+
+
   </div>
 
 <hr>
@@ -99,8 +105,12 @@
     <label for="id_receive_msg_by_email">{{ form.fields.receive_msg_by_email.label }}</label>
     <input type="checkbox" name="receive_msg_by_email" id="id_receive_msg_by_email">
   </div>
- <div class="button_register">
+  <div class="button_register">
      <button id="registration" onclick="sendRoute(this)"> Разместить объявления  </button>
- </div>
-    <script src='{% static "js/sendNewRoute.js" %}'></script>
+  </div>
+<script>
+  $('#id_weight').ionRangeSlider();
+</script>
+
+
 </form>

templates/inter/meta.html

@@ -3,7 +3,10 @@
 <script src='{% static "js/registration.js" %}'></script>
 <script src='{% static "js/authorization.js" %}'></script>
 <script src='{% static "js/newRoute.js" %}'></script>
-<script src='{% static "js/sendNewRoute.js" %}'></script>
-<script src=" https://cdn.jsdelivr.net/npm/ion-rangeslider@2.3.1/js/ion.rangeSlider.min.js "></script>
-<link href=" https://cdn.jsdelivr.net/npm/ion-rangeslider@2.3.1/css/ion.rangeSlider.min.css " rel="stylesheet">
+<script src='{% static "js/sendRoute.js" %}'></script>
+
+<script src='{% static "js/rangeSlider.js" %}'></script>
+<script src='{% static "js/sendRoute.js" %}'></script>
+<script src='{% static "js/ion.rangeSlider.min.js" %}'></script>
+
 <link rel="stylesheet" href="{% static 'css/styles.css' %}">

templates/pages/profile/p_login.html

@@ -3,7 +3,7 @@
 
 
 {% block meta %}
-       <script src='{% static "js/authorization.js" %}'></script>
+    <script src='{% static "js/authorization.js" %}'></script>
 {% endblock %}
 
 {% block content %}

templates/pages/profile/p_user_profile.html

@@ -3,7 +3,10 @@
 
 
 {% block meta %}
-           <script src='{% static "js/newRoute.js" %}'></script>
+            <script src='{% static "js/newRoute.js" %}'></script>
+            <script src='{% static "js/rangeSlider.js" %}'></script>
+            <script src='{% static "js/sendRoute.js" %}'></script>
+            <script src='{% static "js/jquery_v3_6_4.js" %}'> </script>
 {% endblock %}
 
 {% block content %}

templates/tb_base.html

@@ -7,10 +7,12 @@
 
 
     <script src='{% static "js/jquery_v3_6_4.js" %}'> </script>
+
     <link rel="stylesheet" href="{% static 'css/styles.css' %}">
 
+
     {% block meta %}
-{#        {% include 'inter/meta.html' %}#}
+
     {% endblock %}
 </head>
 <body>