JSFiddle - React, Tailwind, and code Playground

by vitorbarbosa

HTML

<div id='map' style='width:500px; height:400px; float:left;'></div>
<div style='width:24%; float:right; margin-left: 10px; border:solid 1px;'>
    <div onclick='clearResults();' style='cursor:pointer; text-align:right; margin-bottom:10px;'>Limpar resultados</div>
    <div id='results' style='height:370px; overflow-y: scroll;'></div>
</div>

<div style='clear:both'>
    <input id='txt_box' type='text' value="Porto"/>
    <input type='button' onclick='getResults();' value='Search' />
</div>

<div id='debug'></div>

<script type="text/javascript">
    var map, search;
    
    function init(){
    map = new SAPO.Maps.Map('map');
    search = new SAPO.Maps.Search(map, 'results');
    map.addControl( new SAPO.Maps.Control.MapType() );
    
    search.registerEvent('completed', this, completed);
    search.registerEvent('error', this, error);
    search.registerEvent('selected', this, selected);
    search.registerEvent('unselected', this, unselected);
    search.registerEvent('cleanResults', this, clean);
    search.registerEvent('canceled', this, canceled);
    }
    
    var search;
    function getResults(){
    clearResults();
    var query = document.getElementById('txt_box').value;
    if (query.length == 0) {
    alert('write something');
    return;
    }
    search.search(query);
    }
    
    function clearResults(){
    search.cancel();
    search.clear();
    }
    
    //Hanlders
    function completed(search){
    debug('completed function called');
    var pois = search.getPOIS();
    
    var length = pois.length;
    search.selectResult(0);
    //search.selectResult(length - 1);
    }
    
    function error(search){
    debug('error function called');
    }
    
    function selected(search, poi){
    debug('selected a poi');
    }
    
    function unselected(search, poi){
    debug('unselect a poi');
    }
    
    function clean(search){
    debug('clean results');
    }
    
    function canceled(search){
    debug('canceled');
    }
    
   ...