back | source
การค้นหาสถานที่ผ่าน JSON API มีขั้นตอนดังนี้
  1. สร้างแถบเครื่องมือค้นหา
    <div id="searchbar">
      <div>
        Keyword: <input id="searchbox" type="text"  />
        <button class="seacrh-btn" id="searchbutton" type="button" >search</button></br>
      </div>
      <table id="searchoption">
        <tr>
          <td>lat: </td><td><input id="lat" type="text" value="13.5" /></td>
          <td>lon: </td><td><input id="lon" type="text" value="100.7" /></td>
          <td>area: </td><td><input id="area" type="text" value="" /></td>
          <td>tag: </td><td><input id="tag" type="text" value="hotel" /></td>
        </tr>
        <tr>
          <td>locale: </td><td><input id="locale" type="text" value="th" /></td>
          <td>offset: </td><td><input id="offset" type="text" value="0" /></td>
          <td>limit: </td><td><input id="limit" type="text" value="20" /></td>
          <td>span: </td><td><input id="span" type="text" value="100km" /></td>
        </tr>
      </table>
    </div>
  2. สร้าง div สำหรับแสดงผลการค้นหา
    <div id="searchresult"></div>
  3. การทำงานของแถบค้นหา
    var suggestTimeout;
    var suggestKeyword = null;
    var searchKeyword = null;
    var suggestList = [];
    
    $(function() {
      $('#searchbox').keyup(function(event) {
        if (event.keyCode == 13) {
          doSearch();
          return;
        }
        clearTimeout(suggestTimeout);
        suggestTimeout = setTimeout(function() {
          doSuggest();
        }, 500);
      });
      $('#searchbutton').click(doSearch);
    });
    
    function doSuggest() {
      var value = $('#searchbox').val();
      if (value == suggestKeyword) return;
      if (value.length < 3) {
        $('#searchresult').html('Type at least 3 characters');
        return;
      }
      suggestKeyword = value;
      searchKeyword = null;
      $('#searchresult').empty();
      var data = { keyword: suggestKeyword };
      if ($('#area').val()) data.area = $('#area').val();
      if ($('#offset').val()) data.offset = $('#offset').val();
      if ($('#limit').val()) data.limit = $('#limit').val();
      $.getJSON('http://search.longdo.com/mapsearch/json/suggest?key=' + apikey + '&callback=?', data, function(msg) {
        if (msg.meta.keyword != suggestKeyword) return;
        var html = '';
        for (var i = 0; i < msg.data.length; i++) {
          suggestList[i] = msg.data[i].w;
          html += '<a href="javascript:suggestClick(' + i + ')">' + msg.data[i].d + '</a><br />';
        }
        $('#searchresult').html(html);
      });
    }
    
    function suggestClick(index) {
      $('#searchbox').val(suggestList[index]);
      doSearch();
    }
    
    function doSearch() {
      clearTimeout(suggestTimeout);
      suggestKeyword = null;
      searchKeyword = $('#searchbox').val();
      $('#searchresult').empty();
      var data = {};
      if (searchKeyword) data.keyword = searchKeyword;
      if ($('#lat').val()) data.lat = $('#lat').val();
      if ($('#lon').val()) data.lon = $('#lon').val();
      if ($('#area').val()) data.area = $('#area').val();
      if ($('#tag').val()) data.tag = $('#tag').val();
      if ($('#locale').val()) data.locale = $('#locale').val();
      if ($('#offset').val()) data.offset = $('#offset').val();
      if ($('#limit').val()) data.limit = $('#limit').val();
      if ($('#span').val()) data.span = $('#span').val();
      $.getJSON('http://search.longdo.com/mapsearch/json/search?key=' + apikey + '&callback=?', data, function(msg) {
        if (msg.meta.keyword != searchKeyword && msg.meta.keyword != 'tag: ' + data.tag) return;
        var html = 'start: ' + msg.meta.start + ' end: ' + msg.meta.end + ' hasmore: ' + msg.meta.hasmore + '<ol>';
        for (var i = 0; i < msg.data.length; i++) {
          html += '<li>' + msg.data[i].name + '</li>';
        }
        $('#searchresult').html(html + '</ol>');
      });
    }
    • lat: พิกัด Latitude
    • lon: พิกัด Longitude
    • area: รหัส geocode จังหวัด/อำเภอ/ตำบล
    • tag: หมวดหมู่ในการค้นหา เช่น โรงแรม, โรงเรียน, โรงพยาบาล เป็นต้น
    • locale: ภาษาของผลการค้นหา เช่น th, en เป็นต้น
    • offset: ลำดับของผลการค้นหา เช่น ต้องการดูผลการค้นหาตั้งแต่ลำดับที่ 21 ให้ใส่ 20 ลงในช่อง
    • limit: จำนวนผลลัพธ์ที่ต้องการ
    • span: ขอบเขตของการค้นหา เช่น 100m, 1000km เป็นต้น