list updated

catalog/static/js/dataRetrieval.js

@@ -112,38 +112,49 @@ function drawPolygon(element) {
 
 $('#ajax-input').focus(function () {
     console.log('in');
-    if (OPT_LIST_IS_HIDDEN && $(this).val() != '') {
+    if (OPT_LIST_IS_HIDDEN && $(this).val()) {
         $('#option-list').show();
-
         OPT_LIST_IS_HIDDEN = false;
     }
 }).blur(function () {
-    if (!OPT_LIST_IS_HIDDEN && $(this).val() != '' && $(event.target).closest('#option-list').length ) {
+    if (!OPT_LIST_IS_HIDDEN && $(this).val() && $(event.target).closest('#option-list').length) {
         $('#option-list').hide();
-
         OPT_LIST_IS_HIDDEN = true;
     }
 });
 
+$('#polygon-list').click(function () {
+    $('#option-list').hide();
+    OPT_LIST_IS_HIDDEN = true;
+    $('#ajax-input').value = $(this)
+});
 
 $(document).click(function (event) {
     if (!OPT_LIST_IS_HIDDEN) {
         //if click is triggered outside '#option-list' element remove the list
         if(!$(event.target).closest('#option-list').length > 0 ) {
             $('#option-list').hide();
-
             OPT_LIST_IS_HIDDEN = true;
         }
     }
 });
 
+
+
 $(document).ready(function () {
     var pol_element = document.getElementById('polygon-list');
 
-    $('#ajax-input').on('input', function(e) {
+    var typingTimer;
+    var typingInterval = 800; //milliseconds
 
-        var value = $(this).val();
-        if (value === '') {
+    // On keyup, start the contdown
+    $('#ajax-input').on('input', function () {
+        var value = $('#ajax-input').val();
+        clearTimeout(typingTimer);
+
+        if (value) {
+            typingTimer = setTimeout(makeRequest.bind(null, value), typingInterval);
+        } else {
             $('#option-list').hide();
             
             while (pol_element.firstChild) {
@@ -154,36 +165,5 @@ $(document).ready(function () {
             
             return
         }
-        // console.log("TOKEN: ", document.getElementsByName('csrfmiddlewaretoken')[0].value);
-        makeRequest(value);
-        // $.ajax({
-        //     type: "POST",
-        //     url: "http://localhost:8080/catalog/searchsubmit/",
-        //     data: {
-        //         'csrfmiddlewaretoken': document.getElementsByName('csrfmiddlewaretoken')[0].value,
-        //         'value': value
-        //     },
-        //     dataType: 'json',
-        //     success: function(data) {
-        //         console.log("DATA: ", data.polygonList);
-                
-        //         while (pol_element.firstChild) {
-        //             pol_element.removeChild(pol_element.firstChild);
-        //         }
-
-        //         data.polygonList.forEach(function (polygon) {
-        //             $('#polygon-list').append('<a href="#"><li class="pol">' + polygon.city + ", " + polygon.state + '</li></a>');
-        //         });
-
-        //         if (OPT_LIST_IS_HIDDEN) {
-        //             $('#option-list').show();
-        //             OPT_LIST_IS_HIDDEN = false;
-        //         }
-        //     }
-        // });
     });
-
-    // $('#option-list').focusout(function () {
-    //     $(this).hide();
-    // });
 });

catalog/templates/base_top.html

@@ -194,8 +194,9 @@
 	<!-- AdminLTE App -->
 	<script src="{% static 'adminlte/dist/js/adminlte.min.js' %}"></script>
 
-	{% block scripts %}{% endblock %}
   <script src="{% static 'js/dataRetrieval.js' %}" type="text/javascript"></script>
+
+	{% block scripts %}{% endblock %}
 	</body>
 </html>
 

catalog/views.py

@@ -30,7 +30,7 @@ def map(request):
     form = ASFSearchForm(request.POST)
 
     # Render the HTML template index.html with the data in the context variable
-    return render(request,'map.html',{"searchForm":form})
+    return render(request, 'map.html', { "searchForm": form })
 
 #-------------------------------------------------------------------------------
 def productList(request):