list

catalog/static/css/body.css

@@ -22,3 +22,38 @@ body
     border: 1px solid #ec5a32;
     background-color:  #ec5a32;
 }
+
+ul.no-bullet {
+    list-style: none;
+    text-align: left;
+    padding: 0px;
+    margin: 0px;
+}
+
+#option-list {
+    margin-top: 3px;
+    display: none;
+    position: absolute;
+    border-radius: 3px;
+    background-color: white;
+    width: 208px;
+    max-height: 173px;
+    overflow: auto;
+    left: 26px;
+    z-index: 1;
+}
+
+li.pol {
+    font: bold 13px Helvetica;
+    text-align: center;
+    text-decoration: none;
+    background-color: #EEEEEE;
+    color: #333333;
+    padding: 7px;
+    border-radius: 3px;
+    border-top: 1px solid #CCCCCC;
+    border-right: 1px solid #333333;
+    border-bottom: 1px solid #333333;
+    border-left: 1px solid #CCCCCC;
+    margin: 3px;
+}
\ No newline at end of file

catalog/static/js/dataRetrieval.js

@@ -45,10 +45,17 @@ $(document).ready(function () {
     var input = document.getElementById('ajax-input');
     var dataList = document.getElementById('polygon-list');
 
-    $('#ajax-input').on('keyup', function(e) {
+    $('#ajax-input').on('input', function(e) {
 
        var value = $(this).val();
-       if (value === '') return;
+       if (value === '') {
+           $('#option-list').hide();
+           var nodeList = document.getElementById('polygon-list')
+           while (nodeList.firstChild) {
+               nodeList.removeChild(nodeList.firstChild);
+           }
+           return
+       }
        console.log(value);
        // console.log("TOKEN: ", document.getElementsByName('csrfmiddlewaretoken')[0].value);
 
@@ -61,21 +68,29 @@ $(document).ready(function () {
            },
            dataType: 'json',
            success: function(data) {
-               if (data.polygonList.length > 0) {
-                var polygon = data.polygonList[0]; // todos los posibles valores para una ciudad
-                var coordinates = polygon.geojson.geometry.coordinates;
-                console.log("DATA: ", polygon);
-
-                coordinates.forEach(coor => {
-                  osmap.addPolygon(coor[0]);
-                })
-               }
-               
-               $('#ajax-input').autocomplete({
-                   source: data.polygonList,
-                   minLength: 3
+               console.log("DATA: ", data.polygonList);
+               // 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);
+               // });
+               data.polygonList.forEach(function (polygon) {
+                   $('#polygon-list').append('<li class="pol">' + polygon.city + " " + polygon.state + '</li>');
                });
+               $('#option-list').show();
+               // $('#ajax-input').autocomplete({
+               //     source: data.polygonList,
+               //     minLength: 3
+               // });
            }
        });
     });
+
+    $('#option-list').focusout(function () {
+        $(this).hide();
+    });
 });
\ No newline at end of file

catalog/templates/map.html

@@ -124,15 +124,20 @@
     {% csrf_token %}
     <div class="input-group">
         <input type="text" id="ajax-input" list="polygon-list" name="value" class="form-control" placeholder="Search...">
-        <datalist id="polygon-list">
+{#        <datalist id="polygon-list">#}
 {#            <option value="merida">#}
 {#            <option value="otro">#}
-        </datalist>
+{#        </datalist>#}
         <span class="input-group-btn">
             <button type="submit" name="search" id="search-btn" class="btn btn-flat"><i class="fa fa-search"></i>
             </button>
         </span>
     </div>
+    <div class="row" id="option-list">
+        <div class="col-12">
+            <ul id="polygon-list" class="no-bullet"></ul>
+        </div>
+    </div>
     </form>
     <!-- /search form -->
     <!-- sidebar menu: : style can be found in sidebar.less -->