사내 인트라넷에 개인별 경비 관리 프로그램을 만들었는데..
경비 관련 계정과목이 50개가 넘는다..
dropdown 으로 한계가 있어보여.. 전체 목록을 넣어놓고 자동완성으로 구현이 가능한지 찾아보니..
의외로 jquery 에서 손쉽게 가능했다.. ㅎ (좋은 세상이야 ㅋㅋㅋ)
기본형태는 아래와 같다 ( 참고 URL : https://jqueryui.com/autocomplete/)
Autocomplete | jQuery UI
Autocomplete Enables users to quickly find and select from a pre-populated list of values as they type, leveraging searching and filtering. The Autocomplete widgets provides suggestions while you type into the field. Here the suggestions are tags for progr
jqueryui.com
진짜 겁나 쉽다
1> jquery 관련 라이브러리 참조
2> 자동완성 구현하려는 데이터 array 로 만들고
3> 자동완성을 구현하려는 input 에 맵핑
4> 끝
나의 경우도 동일하게
--> 계정과목을 ajax 로 가져오면서 --> array로 만들어서 input에 연결 ㅎ
목록에서... 사용자가 내역을 동적으로 늘렸다 줄였다 할 수 있게 개발했기 때문에
input 을 이름으로 가져오게< $('input[name^="atname"]') > 해놨다..
즉, atname 으로 시작하는 전체 input 에서 자동완성이 가능하다 ㅎ
한가지 팁으로... 자동완성 노출 시 전체 목록이 나오게 하는 기능을 못찾아서
array 에 강제로 빈칸을 넣어놓고, 스페이스를 입력하면 모든 목록이 나오도록 해놨다
(그래서 저장할때는 trim()으로 빈칸을 지우고 입력 ㅎ)
'개발 관련' 카테고리의 다른 글
| python 브라우저 없이 크롤링 하는 방법 (0) | 2022.11.24 |
|---|---|
| php get / post 요청 길이 제한 (0) | 2022.09.16 |
| mysql mariadb DB 전체 용량, 테이블별 용량 조회 (0) | 2022.07.29 |
| 파이선 크롤링 - 동적 페이지 크롤링 (0) | 2022.05.03 |
| 리눅스(linux) 폴더별 용량 확인하기 (0) | 2022.01.18 |
댓글