Skip to Content
Go Back
안형우

안녕하세요. 14년차 풀스택 웹개발자 안형우입니다. 이 블로그에서는 WordPress, PHP, CSS, 사용성, 리눅스 서버 등 풀스택 웹개발에서 마주하는 다양한 문제 상황과 해결책, 필요한 개념들을 다룹니다. 👉 소개


작업물

📌 CSS가 어려운 이유 — 프로젝트 중심 실전 CSS 강의 소개 2023-04-13
📌 워드프레스, 답답한 빌더와 플러그인 대신 시원하게 커스터마징하기(강의) 2023-01-15
📌 아무도 말하지 않는 PHP의 좋은 점 2018-10-13
📌 유지보수하기 쉬운 CSS 전략(슬라이드) 2016-12-20
📌 워드프레스 테마에서 템플릿 파일 매칭 순서 2013-05-12
📌 [번역] CSS 코드 냄새 2013-01-01

select2 ajax search code snippet

그냥 코드 보관용 포스트. select2는 내가 본 것 중에 가장 괜찮은 jQuery 자동완성 플러그인이다. 기본적으로는 select 박스에 적용하면 바로 자동완성으로 바꿔주니 아주 간편하게 사용할 수 있다. $('select').select2() 하는 식으로 말이다. 물론 모든 select 태그에 적용해 버리는 짓을 하면 안 된다. 알아먹기 쉬우라고 저렇게 적은 거다.

이 select2로 ajax 자동완성도 가능한데, 이 코드는 그 예제 코드다. 만들었다가 사용하지 않게 됐는데, 버리기 아까워서 보관. select2 버전은 3.5.2 기반이다. 지금 4.0 베타가 나와 있는데, 거기선 작동 안 할 지도 모른다.

$('#모델명').select2({
    placeholder: '모델명 입력',
    minimumInputLength: 2,
    formatInputTooShort: function (input, min) { var n = min - input.length; return n + "글자 이상 더 입력하시면 검색합니다."; },
    ajax: {
        url: 'ajax/models.php',
        dataType: 'json',
        quietMillis: 250,
        data: function (term, page) {
            return {
                q: term // search term
            }
        },
        results: function (data, page) {
            return { results: data };
        },
        cache: true
    },
    initSelection: function($el, callback){
        callback({
            id: $el.val(),
            text: $el.val()
        });
    },
    formatSearching: function(){ return '검색중...'; }
});

html 쪽에선 hidden input을 사용한다.

<input name="모델명" id="모델명" type="hidden"/>

안녕하세요. 14년차 풀스택 웹개발자 안형우입니다. 이 블로그에서는 WordPress, PHP, CSS, 사용성, 리눅스 서버 등 풀스택 웹개발에서 마주하는 다양한 문제 상황과 해결책, 필요한 개념들을 다룹니다. 👉 소개


작업물

답글 남기기

이메일 주소는 공개되지 않습니다. 필수 필드는 *로 표시됩니다