<html>
<head>
<title>Testing the Search Feature</title>
<script type="text/javascript" src="http://js.sapo.pt/Bundles/SAPOMapsAPI.js"></script>
<script type='text/javascript'>
var map, search;
function init(){
map = new SAPO.Maps.Map('map');
search = new SAPO.Maps.Search(map, 'results');
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(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');
}
function debug(msg){
var debug = document.getElementById('debug');
debug.innerHTML += ' -' + msg + '- ';
}
</script>
</head>
<body onload='init();'>
<div id='map' style='width:50%; 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'/>
<input type='button' onclick='getResults();' value='Search' />
</div>
<div id='debug'></div>
</body>
</html>