본문 바로가기
개발의 기록/Web

jQuery를 이용한 데이터 검색

by prographer J 2010. 10. 7.
728x90

요즘 일도 하기 싫고~뭐 하기도 싫어서 포스팅을 미루다 무리드 오랜만에 포스팅을 한다~ㅋㅋ

오늘은 jQuery를 이용하여 데이터를 검색 하는 방법을 알아보자~
 
데이터를 검색 하는 방법에는 여러 가지가 있다. 
우선 검색어를 데이터 베이스로 post나 get으로 던저서 값을 받아오는 방법,
ajax를 이용하여 데이터를 받아 오는방법.
하지만 이러한 방법들은 서버에 다녀와야 하기때문에 속도가 많이 떨어진다.
그래서 생각해본건데...이미 로딩된 데이터를 가공해서 데이터를 불러오면 어떨까? 하는 생각.
뭐 이미 이런비슷한 기능들은 많이 있지만 찾기도 귀찮고 남의 소스 분석하는 것도 귀찮아서 걍 내가 만들어 버렸다 -_-;;;(만드는게 더 귀찮겠다 -_-)
 
우선 여기서 필요한 기능은 jQuery의 selector기능이다.( http://api.jquery.com/category/selectors/ )
위 사이트에 들어가보면 무수히 많은 function들이 있는 것을 확인 할 수 있다. 
이 중에서 Attribute Contains Selector [name*=value] 이 기능을 이용하시면 되겠다.
쪼오기~ 가서 보면
'Selects elements that have the specified attribute with a value containing the a given substring.'
이런 꼬부랑 글씨로 '니가 원하는거 선택 할 수 있다~' 라고 써있다.  한마디로 DB의 like 기능이다. 

이제 어떠한 function을 써야 할 지 알았으므로 실전으로!!
백문이불여일견!
요거다 실행해보쟈~
 
그리고 밑에는 소스~
 
 
<style>
table {border-collapse:collapse;width:400px;font-size:0.8em;}
td,th{border:solid 1px black;text-align:center; }
th{background:#ccc;}
</style>

<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js'></script>
<script type='text/javascript'>
function filter(){
if($('#txtFilter').val()=="")
$("#languageTBody tr").css('display','');
else{
$("#languageTBody tr").css('display','none');
$("#languageTBody tr[name*='"+$('#txtFilter').val()+"']").css('display','');
}
return false;
}
</script>

Filter: <input type='text' id='txtFilter' onkeyup='{filter();return false}' onkeypress='javascript:if(event.keyCode==13){ filter(); return false;}'>
<Br/><br/>
<table>
<thead>
<tr><th>NO</td><th>TITLE</td></tr>
</thead>
<tbody id='languageTBody'>
<tr name='javascript'><td>1</td><td>javascript</td></tr>
<tr name='css'><td>2</td><td>css</td></tr>
<tr name='html'><td>3</td><td>html</td></tr>
<tr name='php'><td>4</td><td>php</td></tr>
<tr name='asp.net'><td>5</td><td>asp.net</td></tr>
<tr name='jsp'><td>6</td><td>jsp</td></tr>
</tbody>
</table>

끝~
위 예제처럼 name속성에 검색어에 해당하는 글씨만 넣어놓으면 된다.
 

 

728x90

댓글