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; });});
마지막을 완성된 예제를 직접보자면 아래를 클릭
댓글