검색 API 간단 예제

간단한 Callback을 이용한 JSON 출력을 이용하여 간단한 자바스크립트 코드 만으로 오픈 API 기능을 이용할 수 있습니다.

Daum 검색 결과 찾기

(검색 버튼을 눌러 보세요!)

해당 검색 결과를 표시 합니다

내 홈페이지에 적용하기

검색 종류를 블로그(blog), 카페(cafe), 게시판(board), 신지식(knowledge) 등으로 나누어 APIKEY만 입력하면 검색 결과를 바로 얻을 수 있습니다.

소스 코드 사용 방법

일반 사용자 등록을 통해 API키를 발급 받습니다.
발급 받은 API키를 아래 굵은 XXX 항목에 붙여 넣습니다.
아래 코드를 자신의 웹 페이지에 삽입합니다.

소스 코드 보기

<h2>Daum 검색 결과 찾기</h2>

<select id="c">
<option value="cafe">카페</option>
<option value="news">뉴스</option>
<option value="blog">블로그</option>
<option value="board">게시판</option>
<option value="book">책</option>
</select>

<input id="q" />
<button id="b" />검색</button>

<h3> 검색 결과를 표시 합니다</h3>
<ul id="r" /></ul>

<script type="text/javascript">
var obj = {
  init : function()
  {
    obj.q = document.getElementById('q');
    obj.b = document.getElementById('b');
    obj.r = document.getElementById('r');
	obj.c = document.getElementById('c'); 
    obj.b.onclick = obj.pingSearch;
  },
  pingSearch : function()
  {
    if (obj.q.value)
    {
      obj.s = document.createElement('script');
      obj.s.type ='text/javascript';
      obj.s.charset ='utf-8';
      obj.s.src = 'http://apis.daum.net/search/'+obj.c.value+'?apikey=12345678abcde&output=json&callback=obj.pongSearch&q=' + encodeURI(obj.q.value);
      document.getElementsByTagName('head')[0].appendChild(obj.s);
    }
  },
  pongSearch : function(z)
  {
    obj.r.innerHTML = '';
    for (var i = 0; i < z.channel.item.length; i++)
    {
      var li = document.createElement('li');
      var a = document.createElement('a');
      var p = document.createElement('p');
      a.href = z.channel.item[i].link;
      a.innerHTML = obj.escapeHtml(z.channel.item[i].title);
      p.innerHTML =  obj.escapeHtml(z.channel.item[i].description);
      
      li.appendChild(a);
      li.appendChild(p);
      obj.r.appendChild(li);
    }
  },
  escapeHtml : function(str) 
  {
    str = str.replace(/&amp;/g, "&");
    str = str.replace(/&lt;/g, "<");
    str = str.replace(/&gt;/g, ">");
    return str;
  }
};
window.onload = function()
{
  obj.init();
};
</script>

API 이용 예제 프로그램

API 이용 예제 코드

구현 사례

검색 API 간단 예제

Daum 검색 결과 찾기

해당 검색 결과를 표시 합니다

내 홈페이지에 적용하기

소스 코드 사용 방법

소스 코드 보기