$( ".selector" ).autocomplete( { source: "api/suggest?target=complete" } );

Keyboard interaction

추천어 목록 메뉴에서 아래 키보드 명령들이 동작합니다.

• UP - 이전 추천어로 포커스를 이동합니다. 첫 번째 추천어의 경우 입력 콘트롤로 포커스를 이동합니다. 입력 콘트롤에 포커스가 있을 경우 마지막 추천어로 포커스를 이동합니다.
• DOWN - 다음 추천어로 포커스를 이동합니다. 마지막 번째 추천어의 경우 입력 콘트롤로 포커스를 이동합니다. 입력 콘트롤에 포커스가 있을 경우 첫 번째 추천어로 포커스를 이동합니다.
• ESCAPE - 추천어 목록 메뉴를 닫습니다.
• ENTER - 현재 포커스를 가지는 추천어를 선택하고 메뉴를 닫습니다.

Dependencies

• UI Core
• Widget Factory
• Position
• Menu

Options

delay

Default 150

키보드 입력 뒤 실제 검색이 실행되기 까지의 지연 시간(millisecond). 이 값이 작을 수록 응답성은 좋아지나 원격 데이터 로딩에 따른 부하는 커지게 됩니다.

Code examples:

지정된 delay 옵션으로 자동완성 위젯을 초기화합니다.

$( ".selector" ).autocomplete( { delay: 500 } );

초기화 후 delay 옵션값을 구하거나 설정합니다.

// getter
var delay = $( ".selector" ).autocomplete( "option", "delay" );
// setter
$( ".selector" ).autocomplete( "option", "delay", 500 );

disabled

Default false

true일 경우 자동완성 기능을 비활성화 시킵니다.

Code examples:

지정된 disabled 옵션으로 자동완성 위젯을 초기화합니다.

$( ".selector" ).autocomplete( { disabled: true } );

초기화 후 disabled 옵션값을 구하거나 설정합니다.

// getter
var disabled = $( ".selector" ).autocomplete( "option", "disabled" );
// setter
$( ".selector" ).autocomplete( "option", "disabled", true );

domain_no

Default 0

검색할 도메인 번호

Code examples:

지정된 domain_no 옵션으로 자동완성 위젯을 초기화합니다.

$( ".selector" ).autocomplete( { domain_no: 1 } );

초기화 후 domain_no 옵션값을 구하거나 설정합니다.

// getter
var domain_no = $( ".selector" ).autocomplete( "option", "domain_no" );
// setter
$( ".selector" ).autocomplete( "option", "domain_no", 1 );

footer

Default

{ "left" : [], "right" : [ "<a data-toggle=\"disable\">끄기</a>" ] }

자동완성 메뉴 하단에 표시할 앵커 목록을 설정합니다. 기본적으로 하단 우측에 "끄기" 앵커만 표시됩니다. 메뉴 하단의 좌측, 우측 앵커들을 각각 left, right 프로퍼티로 설정할 수 있습니다. 앵커의 data-mode 속성을 설정하면 자동완성 검색어 추천 방식을 해당 속성 값으로 변경합니다. 앵커의 data-toggle 속성 값이 disable일 경우 자동 완성 기능을 비활성화시키고, close일 경우는 추천 메뉴를 닫습니다. 사용자가 임의의 HTML 엘리먼트들을 삽입할 수도 있습니다.

Code examples:

지정된 footer 옵션으로 자동완성 위젯을 초기화합니다.

$(".selector").autocomplete( { "footer", { 
	"left"  : [ "<a data-mode=\"s\">첫단어 보기</a>", "<a data-mode=\"e\">끝단어 보기</a>" ],
	"right" : [ "<a data-toggle=\"close\">닫기</a>" ] } 
} );

max_count

Default 10

추천받을 검색어의 최대 개수

Code examples:

지정된 max_count 옵션으로 자동완성 위젯을 초기화합니다.

$( ".selector" ).autocomplete( { max_count: 15 } );

초기화 후 max_count 옵션값을 구하거나 설정합니다.

// getter
var max_count = $( ".selector" ).autocomplete( "option", "max_count" );
// setter
$( ".selector" ).autocomplete( "option", "max_count", 15 );

min_length

Default 1

검색을 실행되기 위해 입력해야 하는 최소 문자 수. 단일 문자 검색 결과가 너무 많아 성능에 영향을 미칠 경우 이 값을 키우는 것을 고려해 보십시오.

Code examples:

지정된 min_length 옵션으로 자동완성 위젯을 초기화합니다.

$( ".selector" ).autocomplete( { min_length: 2 } );

초기화 후 min_length 옵션값을 구하거나 설정합니다.

// getter
var min_length = $( ".selector" ).autocomplete( "option", "min_length" );
// setter
$( ".selector" ).autocomplete( "option", "min_length", 2 );

mode

Default "s"

자동완성 검색어 추천 방식

s

첫 단어 일치

c

가운데 단어 일치

e

끝 단어 일치

t

단어 기반 일치

Code examples:

지정된 mode 옵션으로 자동완성 위젯을 초기화합니다.

$( ".selector" ).autocomplete( { mode: "c" } );

초기화 후 min_length 옵션값을 구하거나 설정합니다.

// getter
var mode = $( ".selector" ).autocomplete( "option", "mode" );
// setter
$( ".selector" ).autocomplete( "option", "mode", "c" );

placement

Default "top"

검색어 입력 컨트롤의 위치

top

위쪽. 추천어 목록은 입력 콘트롤 하단에 표시됩니다.

bottom

아래쪽. 추천어 목록은 입력 콘트롤 상단에 표시됩니다.

Code examples:

지정된 placement 옵션으로 자동완성 위젯을 초기화합니다.

$( ".selector" ).autocomplete( { placement: "bottom" } );

초기화 후 placement 옵션값을 구하거나 설정합니다.

// getter
var placement = $( ".selector" ).autocomplete( "option", "placement" );
// setter
$( ".selector" ).autocomplete( "option", "placement", "bottom" );

source

Default null Mandatory

추천어 목록에 대한 데이터 소스로 반드시 지정해야 합니다.

String 혹은 Function 타입을 지원합니다.

• String: 추천어 목록을 JSON 형식으로 반환하는 서비스 URL.
• Function: 콜백 함수. 표준 URL이 아닌 다른 데이터 소스에 접근할 수 있도록 유연성을 제공합니다. 이 콜백은 아래와 같은 매개변수를 받습니다.

  request

  현재 도메인 옵션 값을 가지는 domain_no 속성, 현재 mode 값을 가지는 mode 속성, 현재 max_count 옵션 값을 가지는 max_count 속성과 현재 입력 콘트롤 값을 가지는 term 속성으로 이루어진 연관 배열입니다.

  response

  사용자에게 추천할 데이터 객체를 매개변수로 하는 콜백 함수입니다.

Code examples:

지정된 source 옵션으로 자동완성 위젯을 초기화합니다.

$( ".selector" ).autocomplete( { 
    source: "http://ksf.konantech.com/ksf/api/suggest?target=complete" 
} );

$( ".selector" ).autocomplete( { 
    source: function(request, response) {
        $.ajax({
            url: "http://ksf.konantech.com/ksf/api/suggest?target=complete",
            data: request,
            dataType: "json",
            success: function(data) {
                response(data);
            }
        });
    }
} );

Methods

close()

추천어 목록 메뉴를 닫습니다.

Code examples:

close 메소드를 호출합니다.

$( ".selector" ).autocomplete( "close" );

destroy()

입력 콘트롤로 부터 자동완성 기능을 제거합니다.

Code examples:

destroy 메소드를 호출합니다.

$( ".selector" ).autocomplete( "destroy" );

disable()

자동완성 기능을 비활성화 시킵니다.

Code examples:

disable 메소드를 호출합니다.

$( ".selector" ).autocomplete( "disable" );

enable()

자동완성 기능을 활성화 시킵니다.

Code examples:

enable 메소드를 호출합니다.

$( ".selector" ).autocomplete( "enable" );

option( optionName )

지정된 optionName에 해당하는 설정값을 반환합니다.

Code examples:

메소드를 호출합니다.

var isDisabled = $( ".selector" ).autocomplete( "option", "disabled" );

option()

위젯에 설정된 옵션들을 키/값 쌍으로 이루어진 연관 배열로 반환합니다.

var options = $( ".selector" ).autocomplete( "option" );

option( optionName, value )

지정된 optionName에 해당하는 설정값을 value로 설정합니다.

Code examples:

검색 도메인을 변경합니다.

$( ".selector" ).autocomplete( "option", "domain_no", 1 );

option( options )

하나 이상의 옵션들을 설정합니다.

Code examples:

검색 도메인과 검색 모드를 변경합니다.

$( ".selector" ).autocomplete( "option", { domain_no: 1, mode: "e" } );

widget()

추천어 목록 메뉴를 포함하는 jQuery 객체를 반환합니다.

Code examples:

widget 메소드를 호출합니다.

$( ".selector" ).autocomplete( "widget" );

Extension Points

자동완성 위젯은 widget factory를 기반으로 작성되었으며 확장 가능합니다. 즉, 이미 존재하는 메소드들을 오버라이딩할 수 있습니다. 위젯 확장에 대한 좀더 자세한 정보는 Extending Widgets with the Widget Factory를 참조하시기 바랍니다.

_normalize( items )

추천어 목록 메뉴에 표시할 하이라이팅 문자 및 추천어 목록을 제어합니다.

• items
  Type: Object
  • seed
    Type: String
  • suggestions
    Type: Array

Code examples:

자동완성 시 첫 단어 및 끝 단어 일치 키워드를 7대 3 비율로 추천합니다. 모든 자동완성 위젯에 대해 반영합니다.

$.widget( "konan.autocomplete", $.konan.autocomplete, {
    _normalize: function( items ) {
        this.seed = items.seed;
        return $.konan.autocomplete.merge( items.suggestions[0], items.suggestions[1], 7, 3);
    }
});
$( ".selector" ).autocomplete( { source: "api/suggest?target=complete", mode: "se" } );

특정 위젯에 대해 첫 단어 및 끝 단어 일치 키워드를 7대 3 비율로 추천합니다.

var instance = $( ".selector" ).autocomplete( { source: "api/suggest?target=complete", mode: "se" } )
    .data( "autocomplete" );
instance._normalize = function( items ) {
    this.seed = items.seed;
    return $.konan.autocomplete.merge(items.suggestions[0], items.suggestions[1], 7, 3);
};

Events

change( event, ui )

Type autocompletechange

입력 콘트롤이 포커스를 잃을 때, 값이 변경되었을 경우 발생합니다.

• event
  Type: Event
• ui
  Type: Object
  • item
    Type: Array
    추천어 목록 메뉴에서 선택된 값입니다. 메뉴에 표시되는 검색어 및 사전 파일에 저장된 기타 정보들이 배열로 전달됩니다.

Code examples:

change 콜백을 지정하여 자동완성 위젯을 초기화합니다.

$( ".selector" ).autocomplete({ change: function( event, ui ) {} });

autocompletechange 이벤트에 리서너를 연결합니다.

$( ".selector" ).on( "autocompletechange", function( event, ui ) {} );

close( event )

Type autocompleteclose

추천어 목록 메뉴가 사라질 때 발생합니다.

• event
  Type: Event

Code examples:

close 콜백을 지정하여 자동완성 위젯을 초기화합니다.

$( ".selector" ).autocomplete({ close: function( event, ui ) {} });

autocompleteclose 이벤트에 리서너를 연결합니다.

$( ".selector" ).on( "autocompleteclose", function( event, ui ) {} );

create( event, ui )

Type autocompletecreate

자동완성 위젯이 생성될 때 발생합니다.

• event
  Type: Event
• ui
  Type: Object

Code examples:

create 콜백을 지정하여 자동완성 위젯을 초기화합니다.

$( ".selector" ).autocomplete({ create: function( event, ui ) {} });

autocompletecreate 이벤트에 리서너를 연결합니다.

$( ".selector" ).on( "autocompletecreate", function( event, ui ) {} );

focus( event, ui )

Type autocompletefocus

추천어 목록 메뉴에서 추천어 포커스가 이동될 때 발생합니다. 기본 동작은 입력 콘트롤의 값을 포커스를 가진 추천어로 변경하는 것입니다. 이 이벤트는 키보드를 통한 추천어 포커스 변경 시에만 발생합니다.

• event
  Type: Event
• ui
  Type: Object
  • item
    Type: Array

Code examples:

focus 콜백을 지정하여 자동완성 위젯을 초기화합니다.

$( ".selector" ).autocomplete({ focus: function( event, ui ) {} });

autocompletefocus 이벤트에 리서너를 연결합니다.

$( ".selector" ).on( "autocompletefocus", function( event, ui ) {} );

open( event )

Type autocompleteopen

추천어 목록 메뉴가 표시될 때 발생합니다.

• event
  Type: Event

Code examples:

open 콜백을 지정하여 자동완성 위젯을 초기화합니다.

$( ".selector" ).autocomplete({ open: function( event, ui ) {} });

autocompleteopen 이벤트에 리서너를 연결합니다.

$( ".selector" ).on( "autocompleteopen", function( event, ui ) {} );

response( event, ui )

Type autocompleteresponse

검색이 완료되고 추천어 목록 메뉴가 표시되기 전에 발생합니다. 추천어 목록에 대한 전처리를 로컬에서 수행할 필요가 있을 경우 유용합니다. 검색된 추천어가 없거나 자동완성 기능이 비활성화되어 추천어 목록 메뉴를 표시하지 않더라도 이 이벤트는 검색이 완료되면 항상 발생합니다.

• event
  Type: Event
• ui
  Type: Object
  • item
    Type: Array

Code examples:

response 콜백을 지정하여 자동완성 위젯을 초기화합니다.

$( ".selector" ).autocomplete({ response: function( event, ui ) {} });

autocompleteresponse 이벤트에 리서너를 연결합니다.

$( ".selector" ).on( "autocompleteresponse", function( event, ui ) {} );

search( event )

Type autocompletesearch

검색이 수행되기 전에 발생합니다. 이 이벤트 처리를 취소하면 검색이 수행되지 않으며 검색어 목록도 추천되지 않습니다.

• event
  Type: Event

Code examples:

search 콜백을 지정하여 자동완성 위젯을 초기화합니다.

$( ".selector" ).autocomplete({ search: function( event, ui ) {} });

autocompletesearch 이벤트에 리서너를 연결합니다.

$( ".selector" ).on( "autocompletesearch", function( event, ui ) {} );

select( event, ui )

Type autocompleteselect

추천어 목록 메뉴에서 키워드가 선택될 때 발생합니다. 기본 동작은 입력 콘트롤의 값을 선택된 추천어로 변경하는 것입니다.

• event
  Type: Event
• ui
  Type: Object
  • item
    Type: Array

Code examples:

select 콜백을 지정하여 자동완성 위젯을 초기화합니다.

$( ".selector" ).autocomplete({ select: function( event, ui ) {} });

추천어 목록 메뉴에서 키워드가 선택되면 바로 검색을 수행하도록 이벤트 리서너를 연결합니다.

$( ".selector" ).on( "autocompleteselect", function( event, ui ) {
$( ".selector" ).val( ui.item[0] ); 
$( "form[name=search-form]" ).submit();
});

$( ".selector" ).rankings( { url: "api/rankings" } );

Dependencies

• UI Core
• Widget Factory

Options

domain_no

Default 0

검색할 도메인 번호

Code examples:

지정된 domain_no 옵션으로 인기 검색어 위젯을 초기화합니다.

$( ".selector" ).rankings( { domain_no: 1 } );

초기화 후 domain_no 옵션값을 구하거나 설정합니다.

// getter
var domain_no = $( ".selector" ).rankings( "option", "domain_no" );
// setter
$( ".selector" ).rankings( "option", "domain_no", 1 );

max_count

Default 10

추천받을 검색어의 최대 개수

Code examples:

지정된 max_count 옵션으로 인기 검색어 위젯을 초기화합니다.

$( ".selector" ).rankings( { max_count: 15 } );

초기화 후 max_count 옵션값을 구하거나 설정합니다.

// getter
var max_count = $( ".selector" ).rankings( "option", "max_count" );
// setter
$( ".selector" ).rankings( "option", "max_count", 15 );

url

Default null Mandatory

인기 검색어 목록을 JSON 형식으로 반환하는 서비스 URL입니다. 이 옵션은 반드시 지정해야 합니다.

Code examples:

지정된 url 옵션으로 인기 검색어 위젯을 초기화합니다.

$( ".selector" ).rankings( { url: "http://ksf.konantech.com/ksf/api/rankings" } );

Methods

destroy()

인기 검색어 위젯을 제거합니다.

Code examples:

destroy 메소드를 호출합니다.

$( ".selector" ).rankings( "destroy" );

option( optionName )

지정된 optionName에 해당하는 설정값을 반환합니다.

Code examples:

메소드를 호출합니다.

var domain_no = $( ".selector" ).rankings( "option", "domain_no" );

option()

위젯에 설정된 옵션들을 키/값 쌍으로 이루어진 연관 배열로 반환합니다.

var options = $( ".selector" ).rankings( "option" );

option( optionName, value )

지정된 optionName에 해당하는 설정값을 value로 설정합니다.

Code examples:

검색 도메인을 변경합니다.

$( ".selector" ).rankings( "option", "domain_no", 1 );

option( options )

하나 이상의 옵션들을 설정합니다.

Code examples:

검색 도메인과 검색 모드를 변경합니다.

$( ".selector" ).rankings( "option", { domain_no: 1, max_count: 15 } );

refresh()

인기 검색어 목록을 갱신합니다. 도메인 번호를 변경하거나 최대 개수를 변경한 후 목록을 갱신할 때 사용할 수 있습니다..

Code examples:

refresh 메소드를 호출합니다.

$( ".selector" ).rankings( "refresh" );

Events

create( event, ui )

Type rankingscreate

인기 검색어 위젯이 생성될 때 발생합니다.

• event
  Type: Event
• ui
  Type: Object

Code examples:

create 콜백을 지정하여 인기 검색어 위젯을 초기화합니다.

$( ".selector" ).rankings({ create: function( event, ui ) {} });

rankingscreate 이벤트에 리서너를 연결합니다.

$( ".selector" ).on( "rankingscreate", function( event, ui ) {} );

$( ".selector" ).recent();

Dependencies

• UI Core
• Widget Factory
• jquery.cookie.js

Options

cookie

Default {name: "konan-recent",separator: "__", expires: 365}

최근 검색어를 저장할 쿠키 옵션

• name
• separator
• expires
• path
• domain
• secure

Code examples:

지정된 cookie 옵션으로 최근 검색어 위젯을 초기화합니다.

$( ".selector" ).recent( { cookie: { expires: 7, path: '/', domain: 'konantech.com', secure: true } } );

max_count

Default 10

유지할 검색어의 최대 개수

Code examples:

지정된 max_count 옵션으로 최근 검색어 위젯을 초기화합니다.

$( ".selector" ).recent( { max_count: 15 } );

초기화 후 max_count 옵션값을 구하거나 설정합니다.

// getter
var max_count = $( ".selector" ).recent( "option", "max_count" );
// setter
$( ".selector" ).recent( "option", "max_count", 15 );

Methods

destroy()

최근 검색어 위젯을 제거합니다.

Code examples:

destroy 메소드를 호출합니다.

$( ".selector" ).recent( "destroy" );

option( optionName )

지정된 optionName에 해당하는 설정값을 반환합니다.

Code examples:

메소드를 호출합니다.

var max_count = $( ".selector" ).recent( "option", "max_count" );

option()

위젯에 설정된 옵션들을 키/값 쌍으로 이루어진 연관 배열로 반환합니다.

var options = $( ".selector" ).recent( "option" );

option( optionName, value )

지정된 optionName에 해당하는 설정값을 value로 설정합니다.

Code examples:

최대 검색어 개수를 변경합니다.

$( ".selector" ).recent( "option", "max_count", 5 );

option( options )

하나 이상의 옵션들을 설정합니다.

Code examples:

최대 검색어 개수와 쿠키 유지 기간을 변경합니다.

$( ".selector" ).recent( "option", { max_count: 5, cookie: { expires: 30 } } );

add( keyword )

최근 검색어 목록에 keyword를 추가합니다. 검색 시 명시적으로 호출해야 합니다..

Code examples:

add 메소드를 호출합니다.

$( ".selector" ).recent( "add", $("#keyword").val() );