jQuery 자동완성 기능(autoComplete)

jQquery를 이용한 자동완성 기능(autoComplete) 

 

 

1. pom.xml에 dependency를 추가합니다.

 <!-- Controller To JSON -->
 <dependency>
   <groupId>com.fasterxml.jackson.core</groupId>
   <artifactId>jackson-databind</artifactId>
   <version>2.5.0</version>
   </dependency>

   <!-- JSON -->
   <dependency>
   <groupId>com.googlecode.json-simple</groupId>
   <artifactId>json-simple</artifactId>
   <version>1.1</version>
 </dependency>

 

2. jsp 파일에 jQuery코드를 추가합니다.

jquery.autocomplete.min.js

다운로드

jquery-3.2.0.min.js

다운로드

<!-- jQuery auto complete -->
<script src="<c:url value="/js/jquery-3.2.0.min.js" />"></script>

<script src="<c:url value="/js/jquery.autocomplete.min.js" />"></script>
<!-- 자동완성 결과 값 꾸며주기 -->
.autocomplete-suggestions { border: 1px solid #999; background: #FFF; overflow: auto; }
.autocomplete-suggestion { padding: 5px 5px; white-space: nowrap; overflow: hidden; font-size:22px}
.autocomplete-selected { background: #F0F0F0; }
.autocomplete-suggestions strong { font-weight: bold; color: #3399FF; }

<input id="w-input-search" name="recv_id" type="text" class="form-control">

<!-- jQuery 코드 시작 -->

 <script>
 $('#w-input-search').autocomplete({
 serviceUrl: '$/getTags',
 paramName: "tagName",
 delimiter: ",",
    transformResult: function(response) {
 return {
   //must convert json to javascript object before process
   suggestions: $.map($.parseJSON(response), function(item) {
       return { value: item.tagName, data: item.id };
    })
  };
            }
  });
  </script>

 

3. 데이터를 담을 수 있는 vo를 추가합니다.

public class Tag {

 public int id;
 public String tagName;

 //getter and setter methods

  public Tag(int id, String tagName) {
  this.id = id;
  this.tagName = tagName;

 }
}

 

4. controller에서 데이터를 가공해서 view로 보냅니다.

public class MessagesController {

// data를 임의로 추가합니다. DB에서 가져오는 경우에는, 별도로 처리해줘야 합니다 
 List<Tag> data = new ArrayList<Tag>();
 MessagesController(){
 data.add(new Tag(1, "ruby"));
 data.add(new Tag(2, "rails"));
 data.add(new Tag(3, "c / c++"));
 data.add(new Tag(4, ".net"));
 data.add(new Tag(5, "python"));
 data.add(new Tag(6, "java"));
 data.add(new Tag(7, "javascript"));
 data.add(new Tag(8, "jscript"));

 }

// view와 controller간의 통신
@RequestMapping(value = "/getTags", method = RequestMethod.GET)
 public @ResponseBody
 List<Tag> getTags(@RequestParam String tagName) {
 return simulateSearchResult(tagName);
}

// 미리보기 데이터 가공
private List<Tag> simulateSearchResult(String tagName) {
 List<Tag> result = new ArrayList<Tag>();
 // iterate a list and filter by tagName
 try{
 	for (Tag tag : data) {
    	if (tag.getTagName().contains(tagName)) {
        	result.add(tag);
        }
    }
  }catch(Exception e){
  	System.err.println(e.getMessage());
  }
  return result;
}

 

참조

https://www.mkyong.com/spring-mvc/spring-mvc-jquery-autocomplete-example/

http://zzznara2.tistory.com/299 

 

 

도움이 되셨다면 광고 한번씩 클릭 부탁드립니다 😁