[jQuery] AutoComplete 자동 완성 기능

개인적으로 공부하면서 기록하는 공간으로
잘못된 정보는 댓글을 통해 알려주시면 감사하겠습니다 :-)

▪ ▪ ▪ ▪ ▪

어느 포털사이트에서나 볼 수 있는 자동완성 기능 !
정확한 워딩을 알고있지 않아도 자동으로 남은 검색어를 완성 해주어 편리하죠

DB에 저장된 데이터를 json 형태로 불러와서 사용하려고 하니
자동완성이 제대로 동작하지 않아 고생 좀 했어요 ㅠㅠ

AutoComplete

입력 필드에 텍스트를 입력하면 자동으로 검색어를 완성해주는 기능인 autocomplete를 jQuery UI에서 제공해주고 있다.

구현 방법

1) 외부 스크립트, 스타일 참조
• CDN 서버에서 스크립트 불러오기

  <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

• 파일을 다운받아 사용하기
* jQuery 스크립트 파일 버전은 ① 풀 버전(개발자용) ② 압축 버전(사용자용) 두 가지가 있는데, 풀 버전은 용량이 크기 때문에 압축 버전 사용을 권장한다.

2) AutoComplete을 설정할 Input Field 설정 (index.html)

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <link rel="stylesheet" href="/autocomplete.css">
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
  <script src="/autocomplete.js"></script>
</head>

<body>
  <input type='text' id='inputSearch'/>
</body>

</html>

자동 완성에 필요할 데이터를 ① javascript의 일반 배열로 저장 하여 사용할 수 있고, ② DB에 저장된 데이터를 json 형태로 불러와서 사용할 수 있다.

① javascript의 일반 배열로 자동완성 기능을 구현하는 방법
- autocomplete.js

// 검색할 데이터 정의
var locList = [
  '영등포본동',
  '영등포동',
  '여의동',
  '당산1동',
  '당산2동',
  '도림동',
  '문래동',
  '양평1동',
  '양평2동',
  '신길1동',
  '신길2동',
  '신길3동',
  '신길4동',
  '신길5동',
  '신길6동',
  '신길7동',
  '대림1동',
  '대림2동',
];

$(document).ready(function () {
  // input필드에 자동완성 기능을 걸어준다
  $('#inputSearch').autocomplete({
    source: locList,
    focus: function (event, ui) {
      return false;
    },
    select: function (event, ui) {},
    minLength: 1,
    delay: 100,
    autoFocus: true,
  });
});

· source : 자동완성 대상이 되고자 하는 데이터를 입력하는 부분
· focus : 포커스가 잡힌 경우 발생하는 이벤트로, 위의 코드에서는 한글에 대한 에러를 잡는 용도로 사용
· select : 자동완성 목록에서 Item 선택 시 발생하는 이벤트
· minLength : 자동완성 기능이 발생하는 최소 글자 수
· autoFocus : 첫 번째 항목 자동 포커스 발생 여부 설정 (default: false)
· delay : input Field에 글자를 쓰고 autocomplete 창이 뜰 때까지 걸리는 시간 (ms)
· close : 자동완성 창이 닫힐 때 발생하는 이벤트

해당 코드를 실행시키면, 아래와 같이 구현된다.

Document

② DB에 저장된 데이터를 json 형태로 불러와서 자동완성 기능을 구현하는 방법
DB에 저장된 데이터로 자동완성 기능을 구현하기 위해서는 쿼리도 짜야하고 API도 개발해야 한다.
개발 순서는 데이터를 불러오는 쿼리 작성, API 개발, 자동완성 기능 구현으로 진행하려고 한다.

- 쿼리 작성 (MSSQL)
검색이 일어나는 컬럼에 대해 LIKE 조건문을 사용하여, 검색하는 글자에 대한 response 값이 받아와질 수 있도록 한다.

DECLARE		@PARAM		VARCHAR(100); -- 검색하는 글자

SELECT		IDX			AS IDX
,		AREA_NAME		AS AREA_NAME
FROM		DBO.TEST_LOCATION_INFO
WHERE		(1=1)
AND		(@PARAM IS NULL OR AREA_NAME LIKE '%'+ @PARAM+'%')

- api 개발 (node.js)
데이터베이스에서 응답한 데이터를 json 형태로 넘겨주기 위한 과정이다.
node.js에서 API 개발하는 방법을 다룬 이전 포스팅이 있으니, 이 과정은 생략하도록 한다.

[MSSQL] node.js에서 Procedure 사용하여 API 생성하기

개인적으로 공부하면서 기록하는 공간으로 잘못된 정보는 댓글을 통해 알려주시면 감사하겠습니다 :-) ▪ ▪ ▪ ▪ ▪ 저장 프로시저 (Stored Procedure) • 일련의 쿼리를 하나의 함수처럼 실행

ahnsisters.tistory.com

- autocomplete.js
받아온 JSON을 map*에 저장 후 자동완성 기능을 구현한다.
*map 함수는 callBack 함수가 return 하는 값으로 새로운 배열을 만들어서 리턴하는 함수이다.

$("#inputSearch").autocomplete({
    source: function (request, response) {
        $.ajax({
            url: stat_path + "/locList",
            type: "POST",
            dataType: "json",
            data: { value: request.term },
            success: function (data) {
                response(
                    $.map(data, function (item) {
                        return {
                            label: item.AREA_NAME,
                            value: item.AREA_NAME,
                            idx: item.IDX,
                        }
                    })
                )
            }
        })
    },
    focus: function (event, ui) {
        return false;
    },
    select: function (event, ui) {
    	console.log(ui.item.idx)
    },
    delay: 100,
    autoFocus: true
});

처음 기능을 구현할 때 최초 한 번 데이터를 불러오고, 그 데이터로 autocomplete을 진행 하는 줄 알고 꽤 오랜시간동안 삽질을 했다.
데이터베이스에 저장된 데이터로 자동완성 기능을 구현할 때는 한글자 씩 입력될 때마다 autocomplete가 이벤트가 발생하여 ajax 통신을 하고, 입력된 글자를 전달하여 그 글자가 포함된 데이터를 추출해 반환해주어야한다.

※참고 autocomplete 스타일 수정 방법

.ui-autocomplete {
  max-height: 200px;
  overflow-y: auto;
  /* prevent horizontal scrollbar */
  overflow-x: hidden;
  height: auto;
}
.ui-menu-item div.ui-state-hover,
.ui-menu-item div.ui-state-active {
  color: #ffffff;
  text-decoration: none;
  background-color: #f6B664;
  border-radius: 0px;
  -webkit-border-radius: 0px;
  -moz-border-radius: 0px;
  background-image: none;
  border:none;
}

Reference

✔ https://programmer93.tistory.com/2

728x90

저작자표시 비영리 변경금지

AutoComplete

구현 방법

Reference

티스토리툴바