자동완성 기능 사용~

자동완성 기능을 구현하는건 정말 쉬워졌다..

예전에 jquery가 없던 시대를 생각 하면 아찔! 하기도 하다....(그많은 코딩을 어찌....)

물론 ajax통신이 발전 되면서 부터 자동완성기능은 이미 실현되고 있었다고 봐야하지 않을까 싶다..

이제는 jquery로 자동완성 기능을 사용하는 방법은 너무나 쉽다..

그냥 plugin을 가져다 붙이고 server script로 전달만 해주면 끝이다.. 물론 plugin을 쓰지 않고 직접 만들수도 있지만..

시간이 금인 개발자들로 하여금...그냥 plugin을 붙여 쓰던가..아니면...입으로 승부하여. 안하기로 하던가...ㅎㅎㅎ

하여간....

AngularJS를 가지고 너무 쉽게.. 자동완성기능을 사용할수 있다..물론 아직까지는 완벽하다고는 할수 없지만..

그래도 맛은 제대로 볼수 있지 않을까~흠!

소스를 보면...

   

<pre class="prettyprint linenums:1">   
<div class="wrap">
	<div class="sel">
		<select name="sel_school" id="sel_school">
			<option value="0">초등학교</option>
			<option value="1">중학교</option>
			<option value="2">특수학교</option>
		</select>
	</div>
	<div class="inp">
		<ul>
			<li><input ng-model="txtSearch" id="txt_search" ng-keyup="schoolList()" type="text"></li>
			<!-- <li><a href=""></a></li> -->
		</ul>
	</div>
	<div class="listpg">
		<ul ng-repeat="school in schools">
			<li><a href="#" ng-click="pinnerValue(school.school_name,school.idx);">{{school.school_name}} [{{school.addr}}]</a></li>				
		</ul>
	</div>
</div> 	

</pre>

<pre class="prettyprint linenums:1">
  $(document).ready(function(){
    $("#txt_search").focus();
  })

	var controllerBody = function($scope,$http){
 		// override the default input to update on blur

		$scope.schoolList = function(){
 			var send = "/admin/event2014/prevention/school.asp";
	 		/*var requestData = $.param({"txt_search": $("#txt_search").val()});*/
	 		var requestData = $.param({
	 			"iclass": $("#sel_school option:selected").val()
	 			,"txt_search": $("#txt_search").val()
	 		});

			$http({
				method: "post"
				,url: send
				,data: requestData
				,headers: {'Content-Type': 'application/x-www-form-urlencoded'}
			}).success(function(data, status, headers, config) {
					$scope.schools = data.result;
			}).error(function(data, status, headers, config) {
					console.log(status);
			});
		}

		$scope.pinnerValue = function(argValue,argIdx){
			parent.$("#chk_schoolname").val(argValue);
			parent.$("#hid_schoolidx").val(argIdx);
			parent.$.colorbox.close();
		}
 	}
</pre>

 정말 이게 소스의 전체! 물론 css와 그런부분들은 별도로 들어가겠지만..

 기본적인 소스는 정말 이게 다~ 

 send변수에는 server에서 실행할 url을 지정해주면 된다.(JSON으로 리턴)

 예시로 작성한건 실제  전국학교 DB에서 학교명을 찾아주는것으로 만들어보았다..

 점점 소스가 늘어나게 되면 angularJS에 factory 와 Service를 사용하는것을 추천한다.

 이걸 작성했을때는 초반이였고...현재는 factory를 이용하여 구연하고 있다.

 jsonp도 지원하기 때문에 $http에서 dataTepe을 jsonp로 지정하여 사용할수도 있다!