글에 앞서서

✏️ 우리가 현재 구현하고 있는 프로젝트는 도서 검색 시스템이다. 현재의 검색 사이트를 보면 거의 대부분은 자동완성을 지원하고 있다. 이러한 이유도 이번에 진행했던 프로젝트 역시 MVP 구현 기능으로 “자동완성”을 구현하기로 하였다.

자동완성을 구현할려면?

1. 검색어와 부합한 책들을 가져오는 속도가 빨라야한다.

• 글자를 치고 1초뒤에 그에 관련된 책들이 우리에게 보인다고 생각을 해보자.. 생각을 하고 싶지 않을 것이다.. 이러한 이유로 글자가 입력되고 그 글자를 server에 전달을 하고 전달받은 글자와 match되는 책들을 view에 return하는 이러한 과정이 한순간에 일어나야한다.

2. 검색정확도가 보장되어야한다. 자동완성은 실시간으로 사용자에게 보여지는 기능이기 때문에 검색 정확도가 상당히 중요하다. (사용자는 “사과”로 시작하는 책들을 원하는데 “사공”이라고 시작하는 책이 나오면 상당히 곤한하다… )

이제 이러한 요구 기능을 구현한 과정을 서술해보겠다. 추가로 구현을 하면서 발생했던 문제를 해결해본 과정들도 추가하겠다.

1.JQuery의 autocomplete를 이용

$(function () {//현재 select가 다를 때 다른 식으로 url을 호출해야함..!
            $("#search_bar").autocomplete({
                source: function (request, response) {
                    let find_name = $("select[name=find_name]").val() // 검색 종류
                    if(find_name=="title"){//책제목을 검색할때에만 자동완성 지원
                        $.ajax({
                            url: "<http://localhost:8080/autocomplete_book>",
                            dataType: "json",
                            data: {
                                q: request.term
                            },
                            success: function (data) {
                                response(data);
                            }
                        });
                    }
                },
                minLength: 2//입력된 글자수가 2개 이상이어야 작동
            });
 });

사실 이제 JQuery는 져가는 단어라고 하지만.. 우리가 사용하는 thymeleaf와 접목하기 현재 제일 쉬운 언어이기 때문에 사용했다.. 하하 현재 우리의 검색창의 id는 "#search_bar"이다 이제 여기에다가 autocomplete를 사용하고 ajax를 통해 server와 통신을 한다 코드에서도 볼수 있듯이 dataType은 json형식이고 key는 q라는 이름으로 value는 request.term 즉 현재 검색창에 입력된 단어가 서버에 전달이 된다. 이러한 과정을 거치고 성공적으로 입력단어와 매칭된 책의 제목을 받으면 그 도서의 제목들이 검색창 아래에 등장하게 된다. (코드 아래에 위치하고 있는 minLength는 자동완성 기능이 싱행되는 최소 글자수를 위미하는데 지금 위의 코드에는 2로 되어있기때문에 검색창에 두글자 이상 입력될때 자동완성 기능이 실행된다😊)

EX.(이런 식으로 자동완성이 실행이 된다.)

2.Controller

@GetMapping("/autocomplete_book")
    public ResponseEntity<String> autocomplete_book(@RequestParam("q") final String keyword) {
        List<String> bookNames = bookService.autocomplete_book(keyword);
        ObjectMapper mapper = new ObjectMapper();

        String resp = "";
        try {
            resp = mapper.writeValueAsString(bookNames);
        } catch (JsonProcessingException e) {
        }
        return new ResponseEntity<String>(resp, HttpStatus.OK);
    }