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

list

parent bdfb6a27
/*Naranja GEO #dc7828*/
@font-face {
font-family: GeointFont;
src: url('../fonts/Myriad-Roman.woff');
font-family: GeointFont;
src: url('../fonts/Myriad-Roman.woff');
}
*{
font-family:GeointFont;
font-family:GeointFont;
}
body
{
......@@ -13,12 +13,47 @@ body
}
.btn-primary
{
background-color: #e16931;
border: 1px solid #ec5a32;
background-color: #e16931;
border: 1px solid #ec5a32;
}
.btn-primary:hover
{
border: 1px solid #ec5a32;
background-color: #ec5a32;
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
......@@ -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
......@@ -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 -->
......
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