Commit 8a9af8f3 authored by Renán Sosa Guillen's avatar Renán Sosa Guillen

list

parent bdfb6a27
...@@ -22,3 +22,38 @@ body ...@@ -22,3 +22,38 @@ body
border: 1px solid #ec5a32; border: 1px solid #ec5a32;
background-color: #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
...@@ -45,10 +45,17 @@ $(document).ready(function () { ...@@ -45,10 +45,17 @@ $(document).ready(function () {
var input = document.getElementById('ajax-input'); var input = document.getElementById('ajax-input');
var dataList = document.getElementById('polygon-list'); var dataList = document.getElementById('polygon-list');
$('#ajax-input').on('keyup', function(e) { $('#ajax-input').on('input', function(e) {
var value = $(this).val(); 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(value);
// console.log("TOKEN: ", document.getElementsByName('csrfmiddlewaretoken')[0].value); // console.log("TOKEN: ", document.getElementsByName('csrfmiddlewaretoken')[0].value);
...@@ -61,21 +68,29 @@ $(document).ready(function () { ...@@ -61,21 +68,29 @@ $(document).ready(function () {
}, },
dataType: 'json', dataType: 'json',
success: function(data) { success: function(data) {
if (data.polygonList.length > 0) { console.log("DATA: ", data.polygonList);
var polygon = data.polygonList[0]; // todos los posibles valores para una ciudad // data.forEach(function(polygon) {
var coordinates = polygon.geojson.geometry.coordinates; // console.log(polygon);
console.log("DATA: ", polygon); // // Create a new <option> element
// var option = document.createElement('option');
coordinates.forEach(coor => { // // Set the value using the item in the JSON array
osmap.addPolygon(coor[0]); // option.value = polygon.city + " " + polygon.state;
}) // // Add the <option> element to the <datalist>.
} // dataList.appendChild(option);
// });
$('#ajax-input').autocomplete({ data.polygonList.forEach(function (polygon) {
source: data.polygonList, $('#polygon-list').append('<li class="pol">' + polygon.city + " " + polygon.state + '</li>');
minLength: 3
}); });
$('#option-list').show();
// $('#ajax-input').autocomplete({
// source: data.polygonList,
// minLength: 3
// });
} }
}); });
}); });
$('#option-list').focusout(function () {
$(this).hide();
});
}); });
\ No newline at end of file
...@@ -124,15 +124,20 @@ ...@@ -124,15 +124,20 @@
{% csrf_token %} {% csrf_token %}
<div class="input-group"> <div class="input-group">
<input type="text" id="ajax-input" list="polygon-list" name="value" class="form-control" placeholder="Search..."> <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="merida">#}
{# <option value="otro">#} {# <option value="otro">#}
</datalist> {# </datalist>#}
<span class="input-group-btn"> <span class="input-group-btn">
<button type="submit" name="search" id="search-btn" class="btn btn-flat"><i class="fa fa-search"></i> <button type="submit" name="search" id="search-btn" class="btn btn-flat"><i class="fa fa-search"></i>
</button> </button>
</span> </span>
</div> </div>
<div class="row" id="option-list">
<div class="col-12">
<ul id="polygon-list" class="no-bullet"></ul>
</div>
</div>
</form> </form>
<!-- /search form --> <!-- /search form -->
<!-- sidebar menu: : style can be found in sidebar.less --> <!-- sidebar menu: : style can be found in sidebar.less -->
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment