(jquery+xml) 순간검색

순간검색

 

순간검색에 대한 자료는 아래 원문URL 페이지의 내용으로 중심으로 합니다. 본 내용은 원문URL에 있는 내용의 요약본입니다. 이해를 돕기위한 수단으로 추가 및 요약한 내용이 있을 수 있습니다. 보다 상세한 내용은 해당 참고URL로 이동 하시기 바랍니다.    원문URL :  http://www.ibm.com/developerworks/kr/library/x-instsearch/#N1007D   Download :  http://www.ibm.com/developerworks/apps/download/index.jsp?contentid=630929&filename=src.zip&method=http&locale=ko_KR

 

 

입력하는 동안 결과를 보여주는 새로운 검색의 항샹 기능인 Google의 순간 검색(Instant) 기능은 수많은 논쟁을 불러일으켰고, 그 원인이 무엇인지는 쉽게 알 수 있다. 결과를 얻기 위해 시작하는 일은 입력만 하면 된다. 결과를 보기 위해 Enter 키를 누른 후 검색을 수정하고 Enter를 다시 누를 필요가 없다. 입력하는 동안 바로 나타난다. 아직 해 본 적이 없다면 한 번 시도해 보자. 그렇게 작은 변화로 유용성 면에서 엄청난 차이가 날 수 있다는 것은 놀라운 일이다.

순간 검색 기능의 이러한 유형에 대해 훌륭한 점은, 특히 jQuery와 같이 훌륭한 클라이언트측 도구를 사용할 때에 구현하기에 간편하다는 점이다. 이 기사에서는 간단한 검색 엔진을 빌드하기 위한 프로세스를 따른 후에 그 엔진에 대해 인스턴트 검색 사용자 인터페이스를 빌드한다.

검색하는 데이터를 받으면서 모든 일이 시작된다.

 

1. XML 데이터 소스 (simpsons.xml) 

<?xml version="1.0" encoding="UTF-8"?>
<episodes>
  <episode title='Simpsons Roasting on an Open Fire' episode='1' season='1' 
  aired='17 December 1989'>
     Christmas seems doomed for the Simpson family when Homer receives no
    Christmas Bonus. Homer becomes a mall Santa Claus, hoping to make money and
    bring Marge, Bart, Lisa, and baby Maggie, a happy holiday.
  </episode>
   ...
</episodes>

 

 

2. Simpsons 검색 클래스 (Simpsons.php)

class Simpsons {
 private $episodes = array();
 public function __construct() {
   $xmlDoc = new DOMDocument();
   $xmlDoc->load("simpsons.xml");
 foreach ($xmlDoc->documentElement->childNodes as $episode)
   {
     if ( $episode->nodeType == 1 ) {
      $this->episodes []= array( 
      'episode' => $episode->getAttribute( 'episode' ),
      'season' => $episode->getAttribute( 'season' ),
      'title' => $episode->getAttribute( 'title' ),
      'aired' => $episode->getAttribute( 'aired' ),
      'summary' => $episode->nodeValue );
     }
   }
 }
 public function find( $q ) {
   $found = array();
   $re = "/".$q."/i";
   foreach( $this->episodes as $episode ) {
     if ( preg_match( $re, $episode['summary'] ) || 
        preg_match( $re, $episode['title'] ) ) {
     $found []= $episode;
   }
   }
   return $found;
 }
}

 

클래스에 대한 생성자는 PHP에 표준이 되는 XML DOM 라이브러리를 사용하여 방송분 정보의 XML 파일을 읽는다. 루트 노드의 모든 하위를 통해 반복되어, 시즌, 제목, 방영 날짜 및 방송분 속성과 요약이 들어있는 노드의 텍스트를 추출한다. 그러면 그러한 모든 데이터를 방송분 배열에 해시 테이블로 추가하였으며, 이는 멤버 변수이다.

find 함수가 제목과 요약에 일치하는 간단한 정규식을 사용하여 일치하는 것을 찾도록 방송분 목록을 검색한다. 일치하는 방송분이 있으면 배열에 추가되며, 그러면 호출자에게 리턴된다. 배열이 공백이면 일치하는 것을 찾을 수 없는 것이다.

그 데이터를 가지고 취하는 다음 단계는 순간 검색 UI가 데이터를 검색하도록 호출하는 Ajax 응답자를 빌드하기 시작하는 것이다

 

 

3. HTML Ajax 응답 페이지 (search.php)

 

맨 위에 Simpsons 클래스가 포함된다. 코드는 그의 새 인스턴스를 작성하고 찾기 호출을 한다. 그러면 응답이 공백인 것처럼 보이며, 그러한 경우 "No Results Found(결과를 발견할 수 없음)"을 리턴한다. 그렇지 않으면 이는 결과를 루프하고 결과의 테이블을 함께 모은다.

include 'Simpsons.php';

$s = new Simpsons();
$episodes = $s->find( $_REQUEST['q'] );
if ( count( $episodes ) == 0 ) {
	echo "No results found";
} else {
	foreach( $episodes as $e ) {
		echo $e['title'] .",". $e['season'] .",". $e['episode'] .",". $e['aired'];
	}
}

 

 

4. 순간검색페이지 (demo.html)

 

 

UI의 첫 번째 버전은 Ajax 요청에 대해 HTML 응답을 사용한다. 이 접근방식은 순간 검색 UI를 구현하는 가장 간편한 방법이다. 순간 검색 UI 웹 페이지는 그 검색 용어를 취하여 그 용어를 사용하는 서버로 Ajax 요청을 작성한다. 그러면 서버는 응답을 구성하는 HTML 블록을 포맷하고 이를 페이지로 다시 보낸다. 순간 검색 UI 웹 페이지에서 코드는 하나의 간편한 호출로 페이지의 일부를 업데이트된 HTML로 바꾼다.

첫 번째로 필요한 것은 HTML 응답 페이지이다. 이 페이지는 요청에서부터 쿼리 문자열을 취한다. Simpsons 클래스를 호출하는 문자열을 사용하여 방송분들을 검색한다. 그 후에 HTML로 리턴되는 방송분 배열을 포맷한다.

<DIV id=search>Search : <INPUT id=item></DIV>
<DIV id=results></DIV>
<SCRIPT>
$(document).ready(function() {
	/* event option = click, focusout, keyup */
	$('#term').keyup(function() {
		$.get('search.php?q='+escape($('#term').val()), function(data) {
			$('#results').html(data);
		});
	});
});
</SCRIPT>

 

 

다량의 작업이 페이지의 맨 아래에서 JavaScript 섹션에서 수행된다. 이는 문서에서 ready 함수를 호출하여 시작된다. 이 호출은 페이지가 준비될 때까지 내부 JavaScript가 실행되지 않도록 보장한다. 내부 JavaScript는 검색 용어 필드에서 키 누름을 모니터하는 검색 용어 입력 오브젝트에서 keyup 함수를 사용한다. 텍스트 필드가 변경될 때에 Ajax get 메소드가 서버로 호출된다. 그리고 그 호출로부터의 데이터 응답은 html 함수를 사용하여 결과 요소를 입력하는 데 사용된다.

JavaScript 코드가 행 노이즈(noise)처럼 보여도 괜찮다. 코드가 선을 넘어 이동해야 하기 때문에 코드 크기를 작게 유지하는 것이 최선이므로 실제로는 JavaScript를 사용하는 최첨단이다.

jQuery 라이브러리 없이 이 모든 작업을 수행할 수 있지만, 라이브러리 사용의 값은 코드가 간결하고 모든 크로스 플랫폼 작업이 사용자를 위해 수행된다. Internet Explorer® 대 Safari 또는 Firefox에 대해 걱정하지 않아도 된다. 코드를 한 번 쓰기만 하면 이는 어디서나 작동한다.

라이브러리를 테스트하기 위해 웹 브라우저에 순간 검색 UI를 도입한다.