polygon info retrieval

catalog/static/js/dataRetrieval.js

-// Get the <datalist> and <input> elements.
-var input = document.getElementById('ajax-input');
-var value = input;
-var dataList = document.getElementById('polygon-list');
-console.log(input);
-// Create a new XMLHttpRequest.
-var request = new XMLHttpRequest();
+// // Get the <datalist> and <input> elements.
+// var input = document.getElementById('ajax-input');
+// var value = input.value;
+// var dataList = document.getElementById('polygon-list');
+// console.log("VALUE:", value);
+// // Create a new XMLHttpRequest.
+// var request = new XMLHttpRequest();
+//
+// // Handle state changes for the request.
+// request.onreadystatechange = function(response) {
+//     if (request.readyState === 4) {
+//         if (request.status === 200) {
+//             // Parse the JSON
+//             var jsonOptions = JSON.parse(request.responseText);
+//
+//             // Loop over the JSON array.
+//             jsonOptions.forEach(function(item) {
+//                 // Create a new <option> element.
+//                 var option = document.createElement('option');
+//                 // Set the value using the item in the JSON array.
+//                 option.value = item;
+//                 // Add the <option> element to the <datalist>.
+//                 dataList.appendChild(option);
+//             });
+//
+//             // Update the placeholder text.
+//             input.placeholder = "Search...";
+//         } else {
+//             // An error occured :(
+//             input.placeholder = "Couldn't load datalist options :(";
+//         }
+//     }
+// };
+//
+// // Update the placeholder text.
+// input.placeholder = "Loading options...";
+//
+// // Set up and make the request.
+// request.open('POST', 'http://localhost:8080/catalog/searchsubmit/', true);
+// request.send({
+//     value: value
+// });
 
-// Handle state changes for the request.
-request.onreadystatechange = function(response) {
-    if (request.readyState === 4) {
-        if (request.status === 200) {
-            // Parse the JSON
-            var jsonOptions = JSON.parse(request.responseText);
-          
-            // Loop over the JSON array.
-            jsonOptions.forEach(function(item) {
-                // Create a new <option> element.
-                var option = document.createElement('option');
-                // Set the value using the item in the JSON array.
-                option.value = item;
-                // Add the <option> element to the <datalist>.
-                dataList.appendChild(option);
-            });
-              
-            // Update the placeholder text.
-            input.placeholder = "Search...";
-        } else {
-            // An error occured :(
-            input.placeholder = "Couldn't load datalist options :(";
-        }
-    }
-};
+$(document).ready(function () {
+    var input = document.getElementById('ajax-input');
+    var dataList = document.getElementById('polygon-list');
 
-// Update the placeholder text.
-input.placeholder = "Loading options...";
+    $('#ajax-input').on('input', function(e) {
 
-// Set up and make the request.
-request.open('POST', 'http://localhost:8080/catalog/searchsubmit/', true);
-request.send({
-    value: value
+       var value = $(this).val();
+       if (value === '') return;
+       console.log(value);
+       // console.log("TOKEN: ", document.getElementsByName('csrfmiddlewaretoken')[0].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);
+               // data.forEach(function(polygon) {
+               //     console.log(polygon);
+               //     // Create a new <option> element
+               //     var option = document.createElement('option');
+               //     // Set the value using the item in the JSON array
+               //     option.value = polygon.city + " " + polygon.state;
+               //     // Add the <option> element to the <datalist>.
+               //     dataList.appendChild(option);
+               // });
+               $('#ajax-input').autocomplete({
+                   source: data
+               });
+           }
+       });
+    });
 });
\ No newline at end of file

catalog/templates/map.html

@@ -125,8 +125,8 @@
     <div class="input-group">
         <input type="text" id="ajax-input" list="polygon-list" name="value" class="form-control" placeholder="Search...">
         <datalist id="polygon-list">
-            <option value="merida">
-            <option value="otro">
+{#            <option value="merida">#}
+{#            <option value="otro">#}
         </datalist>
         <span class="input-group-btn">
             <button type="submit" name="search" id="search-btn" class="btn btn-flat"><i class="fa fa-search"></i>

catalog/views.py

@@ -67,20 +67,26 @@ class SearchSubmitView(View):
             for polygon in polygonList:
                 polygonInfo = json.loads(polygon.json_info)
 
+                # data.append({
+                #     'city'   : polygon.name,
+                #     'state'  : self.state_parser[polygonInfo['properties']['CVE_ENT']],
+                #     'geojson': polygon.json_info
+                # })
                 data.append({
-                    'city'   : polygon.name,
-                    'state'  : self.state_parser[polygonInfo['properties']['CVE_ENT']],
-                    'geojson': polygon.json_info
+                    'city': polygonInfo['properties']['NOMGEO'],
+                    'state': self.state_parser[polygonInfo['properties']['CVE_ENT']],
+                    'geojson': polygonInfo
                 })
 
-        context = {
-            'searchValue': searchValue,
-            'data': json.dumps(data, ensure_ascii=True)
-        }
+        # context = {
+        #     'searchValue': searchValue,
+        #     'data': json.dumps(data, ensure_ascii=True)
+        # }
 
-        rendered_template = template.render(context, request)
+        # rendered_template = template.render(context, request)
         print("DATA:", data)
-        return HttpResponse(rendered_template, content_type='application/json')
+        # return HttpResponse(rendered_template, content_type='application/json')
+        return HttpResponse(json.dumps(data, ensure_ascii=True), content_type='application/json')
 
 
 #-------------------------------------------------------------------------------