CI 코드

제목 [js추가] ajax 자동완성
글쓴이 ci세상 작성시각 2009/08/23 03:50:40
댓글 : 3 추천 : 0 스크랩 : 0 조회수 : 16176   RSS

응용 : 입력폼에 자동완성 기능 추가

다운로드 : http://codeigniter.com/wiki/79ef21e164a750cd267ec8e8f40876c2/
=> 다운 받은 후 javascript 폴더를 CI 설치 폴더로 복사

=== 뷰 파일 ===

<html>
<head>
<title>자동완성</title>
<meta http-equiv="Content-Type" content="text/html; carset=utf-8">
<script src="javascript/prototype.js"type="text/javascript"></script>
<script src="javascript/scriptaculous.js?load=effects,controls" type="text/javascript"></script>
<style type="text/css">

div#list {
position: absolute;
width: 250px;
background-color: white;
border: 1px solid gray;
margin: 0px;
padding: 0px;
}

div#list ul {
list-style-type: none;
margin: 0px;
padding: 0px;
}

div#list li.selected {
background-color: #ffb;
}

div#list li.pref {
margin-top: 20px;
background-color: #000000;
}

</style>
<script type="text/javascript"> 
<!-- 
window.onload = function ()
{
new Ajax.Autocompleter("address","list","get.php");
}
//--> 
</script> 
</head>
<body> 
<form>
<div>

<input type="text" name="address">

</div>
<div id="list"></div>
</form>
</body> 
</html>
== get.php ==
=> CI 루트 폴더에 만드시면 됩니다.

<ul>
<li>codeigniter</li>
<li>codeigniter</li>
</ul>


== 출력모습 ==




참조 : http://tuevin.jugem.jp/?eid=93
 다음글 [팁] row 갯수파악하여 오류방지코드
 이전글 [팁] 모든 펑션의 공통변수 생성 (1)
목록

댓글

최용운 / 2009/08/24 16:02:19 / 추천 0
 오호옷 좋아욧
양승현 / 2009/08/25 10:34:22 / 추천 0
오.. 서제스트.. 캄사캄사..  프로토타입이네요. jquery로 바꿔도 돌아가겠죠?
밝은미소 / 2010/07/19 15:22:14 / 추천 0
오, 유용한 내용이네요.