본문 바로가기
Ajax

jquery 이용한 Ajax 폼으로 검색하기

by 샷타이거 2010. 2. 9.

Ajax 데이터로드하기 폼(form) 검색편

데이타가 여러개 있다면 앞서해본것은 클릭시 로드되는데이타였다.이번에는 폼을 이용하여 그중 검색할때 원하는 결과가 나오도록 해보자

기본적인 폼

간단한 검색용 폼을 만들어보자

 

위와같이하면 흔히 보는 검색 박스하나와 검색버큰이 나올것이다.

php데이터 다시보기

데이타는 저번과 같다 다만 검색으로 하기에 php를 조금 수정해줄필요가있다 찬찬히보자

저번에 포스팅한 데이터를 보려면 여기http://siana.tistory.com/entry/Ajax-%EB%8D%B0%EC%9D%B4%ED%84%B0%EB%A1%9C%EB%93%9C%ED%95%98%EA%B8%B0-%EC%84%9C%EB%B2%84%EB%A1%9C-%EB%8D%B0%EC%9D%B4%ED%84%B0-%EC%A0%84%EB%8B%AC-php

if (isset($entries[$_REQUEST['words']])) {
  $entry = $entries[$_REQUEST['words']];
  $html .= '

'; $html .= $_REQUEST['words']; $html .= '

';

위의 것은 저번에 포스팅한 것 그대로다 이상테에서도 폼에서 검색할경우 잘 검색된다. 하지만 대문자,소문자에따라 결과가 다르다. 즉 소문자html이라고 검색하면 데이타에 HTML이라는 데이타가 검색되어 축력되지않는다

아래 소스는 이문제를 해결하고 있다. php의 strtoupper()함수는 소문자를 대문자로 바꾸는 역할을 한다.

c.f) 반대로strtolower() php함수는 대문자를 소문자로 바꾸는 역할을 한다

if (isset($entries[strtoupper($_REQUEST['words'])])) {
  $entry = $entries[strtoupper($_REQUEST['words'])];
  $html .= '

'; $html .= strtoupper($_REQUEST['words']); $html .= '

';

마지막으로 수정할 부분은 이번에는 검색해서 결과가 나오도록 해야하무로 foreach함수로 일일이 검사해보도록하고, 그리고 두번쨰로 첫번째 출력되는값을 검색된것이 나오도록해주는것이다 아래예제에 따로 덧붙이겠다

foreach ($entries as $words => $entry) {
//foreach 구문으로 검색
  if (strpos($words, strtoupper($_REQUEST['words'])) !== FALSE) {
  $html .= '

'; $html .= $words; //검색결과에선 전채단어가필요하니까 //$_REQUEST['words']구문 대신 $words만 쓴다. //$_REQUEST를 쓴다면 검색입력한 값만 h3에나올것이다. $html .= '

'; }

이로서 php파일 수정을 완료했다. 먼저 소문자를입력해도 검색되도록 해주었고, 검색결과가h3엘리먼트에 모두나오게 하도록 $_REQUEST를 html조각만드는 스크립트에서 삭제시켰다.

실행스크립트코드

마지막으로 볼것은 검색시 나오게 하는 스크립트 소스를 짜보자

$(document).ready(function() {
  $('#siadebar form').submit(function() {
  //검색이므로 load대신 submit이 사용되었다.
 $('#content').load('./ajax_part/server.php', {'term': $('input[name="term"]').val()});
    //여기는 그전과 마찬가지
     return false;
 });});

위 처럼 해준다면 검색시 결과가 나올것이다.클릭시 결과가나오도록 우리는 .load()하지만 이번엔 검색시 결과 출력이무로 .submit()을 사용한것이다. 하지만 위와같은 경우는 검색단어를 모두입력해야 결과가 나온다. 즉 html,json등을 모두 입력해야 결과가나오는 것이다. 일부분 검색시 나오도록하려면 아래와 같이해주면된다.

.serialize()

.serialize()는 요청한 문자열을 자동으로 만들어주는 함수이다. ht를 입력할경우 ht가있는 것을 검색하여 문자열을 자동완성시켜 그결과를 보여준다.

$(document).ready(function() {
  $('#siadebar form').submit(function() {
    $.get('./ajax_part/server02.php', 
    $(this).serialize(), function(data) {
    //load방식에서 get방식으로 바꿨고
    //.serialize()가 사용되었다. 
      $('#content').html(data);
    });  return false; });});

마지막을 완성된 예제를 직접보자면 아래를 클릭

http://sianasiatiger.cafe24.com/study/A_ajax_server_02.html

댓글