비온다

비가 와서 그런지 하루종일 컨디션이 안좋았다. 그런데, 문제 해결도 안되서 밤늦게 코딩짜고 있으니 머리가 아주 뜨끈뜨끈해졌다. 그래도 기술적으로 문제를 어느정도 해결할 수 있어서 마음만은 든든했다.

• 제이쿼리 autocomplete 기능을 이용한 단어 자동검색 기능 추가

프로젝트에서 제이쿼리 UI를 사용했다.

• JQuery UI의 autocomplete에 대해 알아보자

---

🛒본론

⚙재료 검색창!

autocomplete 기능은 배열 또는 ajax로 받은 스트링안에 있는 내용을 소스로 사용해 INPUT창에 검색했을 때, 자동완성이 가능하도록 해주는 Jquery의 User Interface이다. 프로젝트의 수 많은 재료를 어떻게 효율적으로 사용자가 입력할 수 있을까 고민하던차에 제이쿼리에 아주 훌륭한 기능을 발견할 수 있어서 아주 좋았다.

⚙기술 적용!

autocomplete()을 적용하기 위해 어떤 방식을 사용할까 고민하던 차에 재료와 양념을 구분해서 입력하기 위해서는 배열이 아니라 딕셔너리가 필요하다고 판단했다. 그렇기 때문에 ajax방식으로 자료를 넘겨받고자 했다. ajax방식은 소스 매소드에 배열이 아닌 ajax코드를 입력해야 하기 때문에 코드 대공사를 시작 할 수 밖에 없었다.😢

$(function autosearch() {
    $("#searchInput").autocomplete({
        source: function (request, response) { // ajax로 source에 입력을 받는다.
            $.ajax({
                type: "GET",
                url: "/search",
                dataTye : 'json',
                success: function (data) {
                    // 서버에서 json 데이터 response 후 목록 추가
                    response(
                        $.map(data, function(item) { // map을 이용해 받은 딕셔너리를 배열로 변환해준다.
                            return {
                                label : item["IRDNT_NM"], // label, value에 재료명을 저장
                                value : item["IRDNT_NM"],
                                main_sauce : item["IRDNT_TY_NM"] // 재료와 양념을 구분해서 저장
                            }
                        })
                    )
                }
            })
        },
        select: function (event, ui) {
            let ingredient = ui.item.label
            let main_or_sauce = ui.item.main_sauce
            console.log(ingredient)
            console.log(main_or_sauce)

            if (main_or_sauce == "주재료" && IRDNT_NM.indexOf(ingredient) == -1) {
                let temp_html = `<input type="button" class="btn btn-outline-primary" id="selected-ingredient-button-${index}" value="" style="margin-right:5px"/>`
                $('#selected-ingredient-display-main').append(temp_html)
                let temp = 'selected-ingredient-button-' + index
                document.getElementById(temp).value = ingredient;
                index += 1;
                IRDNT_NM.push(ingredient);

            } else if (main_or_sauce == "양념" && IRDNT_NM.indexOf(ingredient) == -1) {
                let temp_html = `<input type="button" class="btn btn-outline-danger" id="selected-ingredient-button-${index}" value="" style="margin:5px 5px 0px 0px"/>`
                $('#selected-ingredient-display-sauce').append(temp_html)
                let temp = 'selected-ingredient-button-' + index
                document.getElementById(temp).value = ingredient;
                index += 1;
                IRDNT_NM.push(ingredient)
            }
        },
        focus: function (event, ui) {
            return false;
        },
        minLength: 1,
        delay: 100,
        disabled: false
    });
});

• 이렇게 작성했을 때, 분명 서버쪽 API로 부터 값도 제대로 받아지고 에러도 없이 console을 찍어도 제대로 저장이 됬지만 정작 가장 중요한 자동완성 검색 기능이 활성화가 안됬다.
• 검색창에 검색을 했을 때, 모든 source값이 셀렉트 기능마냥 생겨버리며 단어를 입력해도 유사한 단어를 찾지 못하는 증상이 발생했다.
• 배열 변수를 만들어 source에 넣었을 때는 정상적으로 작동했으니 문제는 ajax에 있겠구나 라고 생각하며 트러블슈팅을 시작했지만, 새벽의 내 머리로는 도저히 해결할 수 없었다.😥
• 결국 팀원들게 도와달라고 요청을 해서 감사하게도 모두가 다같이 문제를 해결하는데 도움을 줬다.💖💖💖

⚙트러블 슈팅!

트러블 슈팅은 지금 해결하지 못하는 기능을 사용하는 것이 아니라 일단 사용할 수 있는 기능을 사용하여 문제를 해결하는 방안으로 가닥이 잡혀갔다. 기존에 배열 변수를 source를 사용했을 때 제대로 작동했던 것을 생각해 재료와 양념을 통일하여 배열로 만들어 사용하는 방법을 생각해 냈다. 지금까지 구분하는 이유가 셀렉트로 할 경우 양이 너무 많아 갯수를 나누기 위해 구분했던건데 검색을 이용하게 되면 그럴 필요가 없어졌던 것이다.

function search_show() {
    $("#searchInput").autocomplete({
        autoFocus: true, //자동완성 첫 줄에 자동으로 포거스 되는 기능
        source: ingre_list, // 재료가 들어있는 배열
        select: function (event, ui) { // 재료를 선택하면 ui에 입력된다.
            let ingredient = ui.item.value

            if (IRDNT_NM.indexOf(ingredient) == -1) {
                let temp_html = `<input type="button" class="btn btn-outline-primary" id="selected-ingredient-button-${index}" value="" style="margin: auto 5px 3px auto;"/>`
                $('#selected-ingredient-display-main').append(temp_html)
                let temp = 'selected-ingredient-button-' + index
                document.getElementById(temp).value = ingredient;
                index += 1;
                IRDNT_NM.push(ingredient);
            }
        },
        focus: function (event, ui) { //한글 에러를 잡기 위해서는 focus를 입력해 줘야 한다.
            return false; 
        },
        minLength: 1, // 최소 글자
        delay: 100, // 검색창에 글씨를 썼을때 창 뜰때까지 딜레이 시간
        disabled: false // 자동검색 기능 설정
    });
};

• 모두의 집단 지성의 힘으로 결국에 문제를 해결하고 1차 프로젝트 기한까지 검색기능을 추가할 수 있었다. 사실 어느정도 윤곽이 잡혀있는 상태여서 1차까지 완성을 할지 말지 고민을 많이 했지만 모두가 도와준 덕분에 일찍 기능을 성공적으로 적용할 수 있었다. 내일은 코드 정리와 디버깅을 마무리하면 깔끔하게 이번 프로젝트를 마무리 지을 수 있을거 같다.

✔생각 정리

역시 집단지성이라고 혼자 끙끙대던 문제를 다같이 고민하니 해결방안이 나왔다. 내일배움캠프를 진행하면서 팀프로젝트에 대한 인식이 많이 바뀌어가고 있는거 같다. 조별과제는 최악이라고 생각했는데... 분명 팀을 잘 만난 덕분인거 같다.😁
그리고 오늘 결국 ajax를 이용한 기능은 사용하지 못했는데 이 부분에 대해서는 2차 프로젝트 기간에 다시한번 검토해봐야겠다는 생각이 들었다.

• 2차 프로젝트 기간에 autocomplete 기능 ajax 활용 방법 검토해보기

[참조]
https://programmer93.tistory.com/2
https://api.jqueryui.com/autocomplete/