Search and suggest | Longdo Map API

Search POI

Create new div element and assign its name to be a placeholder for searching information

//HTML
<div id="result"></div>

//Javascript
map.Search.placeholder(
    document.getElementById('result')
);

Create new text box (e.g. #search) for keyword and options to be submitted by clicking the button

Function doSearch();

search = document.getElementById('search');

//Enter event #search
search.onkeyup = function(event) {
  if((event || window.event).keyCode != 13)
     return;
  doSearch();
}

function doSearch() {
  map.Search.search(search.value, {
    area: document.getElementById('area').value,
    tag: document.getElementById('tag').value,
    span: document.getElementById('span').value,
    limit: document.getElementById('limit').value
  });
  suggest.style.display = 'none';
}

How to use search function

map.Search.search(KEYWORD, OPTIONS);

KEYWORD: Keyword
OPTIONS: Extra options
- area: Geocode of search area , 10 is Bangkok , 1007 is Pathumwan district
- tag: Tag such as hospital,school
- span: Span with unit in deg, m or km
- limit: Number of results returned

How to set default language on the map
```
map.Search.language(LANGUAGE);
```
- LANGUAGE: th or en
Geocode list

Suggest

Set oninput event to search box

search.oninput = function() {
  if (search.value.length < 3) {
    suggest.style.display = 'none';
    return;
  }
  
  map.Search.suggest(search.value, {
    area: document.getElementById('area').value
  });
};

Bind suggest event and get argument result on display

suggest = document.getElementById('suggest');

map.Event.bind('suggest', function(result) {
  if (result.meta.keyword != search.value) return;
  
  suggest.innerHTML = '';
  for (var i = 0, item; item = result.data[i]; ++i) {
    longdo.Util.append(suggest, 'a', {
      innerHTML: item.d,
      href: 'javascript:doSuggest(\'' + item.w + '\')'
    });
  }
  suggest.style.display = 'block';
});
      
function doSuggest(value) {
  search.value = value;
  doSearch();
}