jquery 연결 방법 & 자동 완성 검색 기능

1. jquery 는 library 이므로 홈페이지에서 가져와야함

2. Html 작성

<div class="content">

<div class="경쟁사분석"> 여기는 경쟁사 분석</div>

<div id="input-form">

이름 : <input type="text" id="keyword">

</div>

 

<table id="user-table">

<thead>

<tr>

<th>번호</th>

<th>이름</th>

<th>생년월일</th>

<th>학과</th>

<th>학번</th>

</tr>

</thead>

 

<tbody>

<tr>

<td>1</td>

<td>박경두</td>

<td>1991.09.07</td>

<td>경영정보학과</td>

<td>2000290031</td>

</tr>

<tr>

<td>2</td>

<td>김동규</td>

<td>1991.07.07</td>

<td>경영학과</td>

<td>2000290032</td>

</tr>

 

</tbody>

</table>

</div>

 

3. css 작성

#select {width: 960px; margin: 0 auto;}

#select #input-form {text-align: center;}

#user-table {margin: 0 auto; text-align: center;}

#input-form {margin-top: 10px; margin-bottom: 10px;}

 

#user-table {border-collapse: collapse;}

#user-table > thead > tr { background-color: #333; color:#fff; }

#user-table > thead > tr > th { padding: 8px; width: 150px; }

#user-table > tbody > tr > td { border-bottom: 1px solid gray; padding:8px; }

 

4. js 파일 작성

#select {width: 960px; margin: 0 auto;}

#select #input-form {text-align: center;}

#user-table {margin: 0 auto; text-align: center;}

#input-form {margin-top: 10px; margin-bottom: 10px;}

 

#user-table {border-collapse: collapse;}

#user-table > thead > tr { background-color: #333; color:#fff; }

#user-table > thead > tr > th { padding: 8px; width: 150px; }

#user-table > tbody > tr > td { border-bottom: 1px solid gray; padding:8px; }

 

 

5. javascript 함수 쓸 때는 body 밖에 맨 끝에서 해줘야 함

 

6. javascript 함수 있는 파일 경로 추가