jQuery를 UI의 예 - 자동 (자동 완성)
사용자가 신속하게 찾을 프리셋 값의리스트로부터 선택할 수 있도록, 검색, 필터 값을 사용자 입력에 기초하여.
자동 완성 구성 요소에 대한 자세한 내용은 API 문서를 참조 자동 부재 (자동 완성 위젯을) .
이 섹션을 사용하여 다운로드를 search.php .
기본 기능
당신이 입력 필드, 자동으로 수행하는 경우 (자동 완성) 회원들은 조언을 제공합니다. 이 예에서, 권장되는 옵션 프로그래밍 언어가 제공되며, 사용자가 입력 할 수 있습니다 "JA는"그것을 시도, 당신은 자바 나 자바 스크립트를 얻을 수 있습니다.
데이터 소스는 소스 선택은 멤버가 사용할 사용하여 간단한 자바 스크립트 배열이다.
<! DOCTYPE html로>
<HTML LANG = "EN">
<헤드>
<메타 문자 집합 = "UTF-8">
<제목> jQuery를 UI 자동 완성 기능 (자동 완성) - 기본 기능 </ 제목>
<링크 REL = "스타일 시트"HREF = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<스크립트 SRC = "// code.jquery.com/jquery-1.9.1.js"> </ script>
<스크립트 SRC = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
<링크 REL = "스타일 시트"HREF = "http://jqueryui.com/resources/demos/style.css">
<스크립트>
$ (함수 () {
var에 availableTags의 = [
"액션"
"AppleScript로"
"ASP를"
"BASIC"
"C",
"C ++",
"Clojure의"
"COBOL"
"ColdFusion에서"
"얼랑"
"포트란"
"멋져요",
"하스켈"
"자바"
"자바 스크립트"
"리스프"
"펄"
"PHP"
"파이썬"
"루비",
"스칼라"
"계획"
]
$ ( "#tags") .autocomplete ({
출처 : availableTags
});
});
</ 스크립트>
</ 헤드>
<바디>
<사업부 클래스 = "UI 위젯">
<= "태그"에 대한 라벨> 태그 : </ 라벨>
<입력 한 id = "태그">
</ DIV>
</ BODY>
</ HTML>
악센트
텍스트 필드에 악센트가 포함 된 문자가 일치하지 않는 경우에도 결과를 사용자 정의 소스 옵션을 사용하여 자동 완성 필드, 악센트 문자 항목을 개발하였습니다. 텍스트 필드에 악센트 문자를 입력하는 경우, 그것은 비 스트레스 항목의 결과를 표시하지 않습니다.
전용 "요른"를 참조하십시오 것 "조"를 입력 한 후, 당신은 "존"과 "요른"를 참조하십시오 "조"를 입력하십시오.
<! DOCTYPE html로>
<HTML LANG = "EN">
<헤드>
<메타 문자 집합 = "UTF-8">
<제목> jQuery를 UI 자동 완성 기능 (자동 완성) - 악센트 </ 제목>
<링크 REL = "스타일 시트"HREF = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<스크립트 SRC = "// code.jquery.com/jquery-1.9.1.js"> </ script>
<스크립트 SRC = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
<링크 REL = "스타일 시트"HREF = "http://jqueryui.com/resources/demos/style.css">
<스크립트>
$ (함수 () {
var에 이름 = [ "요른 Zaefferer", "스콧 곤살레스", "존 레식"];
var에 accentMap = {
"A": "A",
"O": "O"
};
var에 정상화 = 기능 (용어) {
var에 RET = "";
대한 (var에 나는 = 0; i가 term.length을 <; 내가 ++) {
RET + = accentMap [term.charAt (I)] || term.charAt (I);
}
RET를 반환;
};
$ ( "#developer") .autocomplete ({
출처 : 기능 (요청, 응답) {
var에 정규 = 새로운 정규식 ($ .ui.autocomplete.escapeRegex (request.term), "I");
응답 ($의 .grep (이름, 함수 (값) {
값 = value.label || value.value || 값;
matcher.test (값)을 반환 || matcher.test은 ((정상화 값));
}));
}
});
});
</ 스크립트>
</ 헤드>
<바디>
<사업부 클래스 = "UI 위젯">
<양식>
< "개발자"= 대한 라벨> 개발자 : </ 라벨>
<입력 한 id = "개발자">
</ FORM>
</ DIV>
</ BODY>
</ HTML>
분류
검색 결과 분류. "a"또는 "n"을 입력하십시오.
<! DOCTYPE html로>
<HTML LANG = "EN">
<헤드>
<메타 문자 집합 = "UTF-8">
<제목> jQuery를 UI 자동 완성 기능 (자동 완성) - 구분 </ 제목>
<링크 REL = "스타일 시트"HREF = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<스크립트 SRC = "// code.jquery.com/jquery-1.9.1.js"> </ script>
<스크립트 SRC = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
<링크 REL = "스타일 시트"HREF = "http://jqueryui.com/resources/demos/style.css">
<스타일>
.ui-자동 완성 범주 {
글꼴 - 무게 : 굵게;
패딩 : .2em .4em;
마진 : .8em 0 .2em;
라인 - 높이 : 1.5;
}
</ 스타일>
<스크립트>
$ 된 .widget ( "Custom.catcomplete", $ .ui.autocomplete, {
_renderMenu : 기능 (UL, 항목) {
이 = VAR,
currentCategory = "";
$의 .each (항목, 기능 (인덱스 항목) {
{(currentCategory! item.category =)의 경우
ul.append ( "<리 클래스 = 'UI - 자동 완성 - 카테고리'>"+ item.category + "</ 리>");
currentCategory = item.category;
}
that._renderItemData (UL, 항목);
});
}
});
</ 스크립트>
<스크립트>
$ (함수 () {
VAR 데이터 =
{레이블 : "앤더스"카테고리 : ""},
{레이블 : "안드레아스"카테고리 : ""},
{레이블 : "안탈"카테고리 : ""},
{레이블 : "annhhx10"카테고리 : "제품"},
{레이블 : "annk의 K12", 카테고리 : "제품"},
{레이블 : "annttop의 C13"카테고리 : "제품"},
{레이블 : "앤더스 앤더슨"카테고리 : "사람들"},
{레이블 : "안드레아스 안데르손"카테고리 : "사람들"},
{레이블 : "안드레아스 존슨"카테고리 : "사람들"}
]
$ ( "#search") .catcomplete ({
지연 : 0,
출처 : 데이터
});
});
</ 스크립트>
</ 헤드>
<바디>
<= "검색"에 대한 라벨> 검색 </ 라벨>
<입력 한 id = "검색">
</ BODY>
</ HTML>
콤보 상자 (콤보 상자)
자동 완성 및 버튼에 의해 만들어진 사용자 지정 구성 요소입니다. 당신은 어떤 문자가 입력 내용 필터링 결과에 따라 얻을 입력하거나 버튼을 사용하여 전체 목록에서 선택할 수 있습니다.
입력은 소스를 사용자 정의 할 수있는 자동 완성 옵션을 통과 한, 기존의 선택 요소에서 읽습니다.
이 지원되지 않는 완벽한 구성원이 아닙니다. 여기에 자동 완성 사용자 정의 기능을 설명하는 것입니다. 이 부분은 작품에 대한 자세한 내용은 jQuery를 기사를 보려면 여기를 클릭하십시오.
<! DOCTYPE html로>
<HTML LANG = "EN">
<헤드>
<메타 문자 집합 = "UTF-8">
<제목> jQuery를 UI 자동 완성 기능 (자동 완성) - 콤보 상자 (콤보) </ 제목>
<링크 REL = "스타일 시트"HREF = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<스크립트 SRC = "// code.jquery.com/jquery-1.9.1.js"> </ script>
<스크립트 SRC = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
<링크 REL = "스타일 시트"HREF = "http://jqueryui.com/resources/demos/style.css">
<스타일>
.custom - 콤보 {
위치 : 상대;
디스플레이 : 인라인 블록;
}
.custom - 콤보 - 토글 {
위치 : 절대;
상단 : 0;
바닥 : 0;
마진 왼쪽 : -1px;
패딩 : 0;
/ * 지원 : IE7 * /
* 높이 : 1.7em;
* 위 : 0.1em;
}
.custom - 콤보 입력 {
여백 : 0;
패딩 : 0.3em;
}
</ 스타일>
<스크립트>
(함수 ($) {
$의 된 .widget ( "Custom.combobox", {
_create : 함수 () {
this.wrapper = $ ( "<SPAN>")
.addClass ( "맞춤 콤보 상자")
.insertAfter (this.element);
this.element.hide ();
this._createAutocomplete ();
this._createShowAllButton ();
},
_createAutocomplete : 함수 () {
( "선택"), VAR 선택 =의 this.element.children
값 = selected.val () selected.text () : "";?
this.input = $ ( "<입력>")
.appendTo (this.wrapper)
.val (값)
.attr ( "제목", "")
.addClass ( "맞춤 콤보 입력 UI 위젯 UI 위젯 콘텐츠 UI 상태 기본 UI 코너에서 왼쪽")
.autocomplete ({
지연 : 0,
MINLENGTH : 0,
소스 : $ .proxy (이, "_source")
})
.tooltip ({
tooltipClass "UI 상태 강조 표시"
});
this._on (this.input, {
autocompleteselect : 함수 (이벤트, UI) {
ui.item.option.selected = TRUE;
this._trigger은 ({, 이벤트 "를 선택"
항목 : ui.item.option
});
},
autocompletechange "_removeIfInvalid"
});
},
_createShowAllButton : 함수 () {
var에 입력 = this.input,
wasOpen = 거짓;
$ ( "<A>")
.attr ( "tabIndex를", -1)
.attr ( "제목", "보기 모든 항목")
.tooltip ()
.appendTo (this.wrapper)
.button ({
아이콘 : {
주 : "UI-아이콘 삼각형-1의"
},
텍스트 : 거짓
})
.removeClass ( "UI 코너 모두")
.addClass ( "맞춤 콤보 - 토글 UI 코너 오른쪽")
.mousedown (함수 () {
wasOpen = input.autocomplete ( "위젯") ( "표시") 네 질병;
})
.click (함수 () {
input.focus ();
// 당신은 닫혀 볼 경우 경우 (wasOpen) {
반환;
}
// 모든 결과 input.autocomplete ( "", "검색")를 표시, 검색의 값으로 빈 문자열을 전달;
});
},
_source : 기능 (요청, 응답) {
var에 정규 = 새로운 정규식 ($ .ui.autocomplete.escapeRegex (request.term), "I");
응답 (this.element.children ( "옵션") .MAP (함수 () {
변수 텍스트 = $ (이)는 .text ();
경우 (this.value && (! request.term || matcher.test (텍스트)))
{반환
레이블 텍스트,
값 : 텍스트,
옵션이
};
}));
},
_removeIfInvalid : 함수 (이벤트, UI) {
{항목을 선택 // 그리고 만약 다른 작업 (ui.item)를 수행하지 않습니다
반환;
}
// 일치 검색 (대소 문자 구분)
this.input.val VAR 값 = ()
valueLowerCase = value.toLowerCase ()
유효 = 거짓;
this.element.children ( "옵션") .each (함수 () {
경우 ($ (이)는 .text ().와 toLowerCase () === valueLowerCase) {
this.selected = 유효 = TRUE;
false를 반환;
}
});
일치하는 항목이 발견 // 다른 작업을하는 경우 (유효) {
반환;
}
// 잘못된 값 this.input 제거
.val ( "")
.attr ( "제목", 값은 + "항목을 일치하지 않습니다")
.tooltip ( "열");
( "") this.element.val;
() {(기능을 this._delay
this.input.tooltip ( "가까운") .attr ( "제목", "");
}, 2500);
this.input.data ( "UI-자동 완성") .term = "";
},
_destroy : 함수 () {
this.wrapper.remove ();
this.element.show ();
}
});
}) (JQuery와);
$ (함수 () {
$ ( "#combobox") .combobox ();
$ ( "#toggle") .click (함수 () {
$ ( "#combobox") .toggle ();
});
});
</ 스크립트>
</ 헤드>
<바디>
<사업부 클래스 = "UI 위젯">
<레이블> 좋아하는 프로그래밍 언어 : </ 라벨>
<선택 한 id = "콤보">
<옵션 값 = ""> 선택 ... </ 옵션>
<옵션 값 = "액션"> 액션 </ 옵션>
<옵션 값 = "AppleScript로"> AppleScript로 </ 옵션>
<옵션 값 = "ASP를">의 ASP </ 옵션>
<옵션 값 = "BASIC"> 기본 </ 옵션>
<옵션 값 = "C"> C </ 옵션>
<옵션 값 = "C ++"> C ++ </ 옵션>
<옵션 값 = "Clojure의"> Clojure의 </ 옵션>
<옵션 값 = "COBOL"> COBOL </ 옵션>
<옵션 값 = "ColdFusion에서"> ColdFusion에서 </ 옵션>
<옵션 값 = "얼랑"> 얼랑 </ 옵션>
<옵션 값 = "포트란"> 포트란 </ 옵션>
<옵션 값 = "멋져요"> 그루비 </ 옵션>
<옵션 값 = "하스켈"> 하스켈 </ 옵션>
<옵션 값 = "자바"> 자바 </ 옵션>
<옵션 값 = "자바 스크립트"> 자바 스크립트 </ 옵션>
<옵션 값 = "리스프"> 리스프 </ 옵션>
<옵션 값 = "펄"> 펄 </ 옵션>
<옵션 값 = "PHP"> PHP </ 옵션>
<옵션 값 = "파이썬"> 파이썬 </ 옵션>
<옵션 값 = "루비"> 루비 </ 옵션>
<옵션 값 = "스칼라"> 스칼라 </ 옵션>
<옵션 값 = "제도"> 계획 </ 옵션>
</ 선택>
</ DIV>
<= "전환"버튼 ID> 디스플레이 기반 선택 상자 </ 버튼>
</ BODY>
</ HTML>
사용자 정의 데이터 및 디스플레이
당신은 사용자 정의 데이터 형식을 사용하고, 단순히 기본 동작을 무시하고 데이터를 표시하도록 선택할 초점을 맞춤으로써 할 수 있습니다.
"J"를 입력 시도하거나 아래쪽 화살표 키를 누르면, 당신은 항목의 목록을 얻을 수 있습니다.
<! DOCTYPE html로>
<HTML LANG = "EN">
<헤드>
<메타 문자 집합 = "UTF-8">
<제목> jQuery를 UI 자동 완성 기능 (자동 완성) - 사용자 정의 데이터 및 표시 </ 제목>
<링크 REL = "스타일 시트"HREF = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<스크립트 SRC = "// code.jquery.com/jquery-1.9.1.js"> </ script>
<스크립트 SRC = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
<링크 REL = "스타일 시트"HREF = "http://jqueryui.com/resources/demos/style.css">
<스타일>
# 프로젝트 레이블 {
디스플레이 : 블록;
글꼴 - 무게 : 굵게;
마진 - 하단 : 1em;
}
# 프로젝트-아이콘 {
플로트 : 왼쪽;
높이 : 32px;
폭 : 32px;
}
# 프로젝트-설명 {
여백 : 0;
패딩 : 0;
}
</ 스타일>
<스크립트>
$ (함수 () {
VAR 프로젝트 = [
{
값 : "JQuery와"
레이블 : "jQuery를"
내용 : "쓰기 이하,보다, 자바 스크립트 라이브러리을"
아이콘 : "jquery_32x32.png"
},
{
값 : "JQuery와 - UI를"
레이블 : "jQuery를 UI"
내용 : "jQuery를 공식 사용자 인터페이스 라이브러리"
아이콘 : "jqueryui_32x32.png"
},
{
값 : "sizzlejs"
레이블 : "지글 지글 JS"
내용 : "순수 자바 스크립트 CSS 선택기 엔진"
아이콘 : "sizzlejs_32x32.png"
}
]
$ ( "#project") .autocomplete ({
MINLENGTH : 0,
출처 : 프로젝트,
초점 : 함수 (이벤트, UI)를 {
$ ( "#project") .val (Ui.item.label);
false를 반환;
},
선택 기능 (이벤트, UI)를 {
$ ( "#project") .val (Ui.item.label);
$ ( "# 프로젝트-ID") .val (ui.item.value);
$ ( "# 프로젝트-설명") .html 중에서 (ui.item.desc);
$ ( "# 프로젝트-아이콘") .attr ( "SRC", "이미지 /"+ ui.item.icon);
false를 반환;
}
})
.DATA ( "UI-자동 완성") ._ renderItem = 기능 (UL, 항목) {
$를 반환 ( "<LI>")
으로 .Append ( "<A>"+ item.label + "로 <br>"+ item.desc + "</a>을")
.appendTo (UL);
};
});
</ 스크립트>
</ 헤드>
<바디>
<사업부 아이디 = "프로젝트 레이블"> 항목 (유형 "J")을 선택합니다 </ DIV>
<IMG 아이디 = "프로젝트 아이콘"SRC = "이미지 / transparent_1x1.png"클래스 = "UI 상태 기본"ALT = "">
<입력 한 id = "프로젝트">
<입력 유형 = "숨겨진"ID = "프로젝트 ID">
<P ID = "프로젝트 설명"> </ P>
</ BODY>
</ HTML>
여러 값
사용법 : 이러한 "J"와 같은 일부 문자를 입력하면 관련 프로그래밍 언어의 결과를 볼 수 있습니다. 값을 선택하고 문자가 추가 가치를 계속 입력합니다.
이 예는 여러 자동 입력 할 수있는 단일 텍스트 필드의 값을 달성하기 위해 소스 옵션 및 이벤트를 사용하는 방법을 보여줍니다.
<! DOCTYPE html로>
<HTML LANG = "EN">
<헤드>
<메타 문자 집합 = "UTF-8">
<제목> jQuery를 UI 자동 완성 기능 (자동 완성) - 여러 개의 값 </ 제목>
<링크 REL = "스타일 시트"HREF = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<스크립트 SRC = "// code.jquery.com/jquery-1.9.1.js"> </ script>
<스크립트 SRC = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
<링크 REL = "스타일 시트"HREF = "http://jqueryui.com/resources/demos/style.css">
<스크립트>
$ (함수 () {
var에 availableTags의 = [
"액션"
"AppleScript로"
"ASP를"
"BASIC"
"C",
"C ++",
"Clojure의"
"COBOL"
"ColdFusion에서"
"얼랑"
"포트란"
"멋져요",
"하스켈"
"자바"
"자바 스크립트"
"리스프"
"펄"
"PHP"
"파이썬"
"루비",
"스칼라"
"계획"
]
기능 분할 (발) {
val.split를 반환 (/ \ s의 * /);
}
기능 extractLast (용어) {
() .pop 분할 (용어)을 반환;
}
$ ( "#tags")
// 당신은 .bind ( "에서 KeyDown", 기능 (이벤트를 텍스트 필드를 떠나지 않고 항목을 선택하면) {
(event.keyCode === $ .ui.keyCode.TAB 경우 &&
$ (이) .DATA ( "UI-자동 완성") .menu.active) {
에서는 event.preventDefault ();
}
})
.autocomplete ({
MINLENGTH : 0,
출처 : 기능 (요청, 응답) {
// 위로 자동 완성,하지만 (마지막 항목 응답 ($의 .ui.autocomplete.filter를 추출
availableTags, extractLast (request.term)));
},
초점 : 함수 () {
// 방지에 초점 삽입 값이 false를 반환 획득하는 단계;
},
선택 기능 (이벤트, UI)를 {
var에 조건 = 분할 (this.value);
// () 현재의 입력 terms.pop를 제거;
// 선택된 옵션 terms.push (ui.item.value)를 추가;
// + 공간 terms.push ( "")의 말에 쉼표를 추가, 자리 표시 자 추가;
this.value = terms.join ( ",");
false를 반환;
}
});
});
</ 스크립트>
</ 헤드>
<바디>
<사업부 클래스 = "UI 위젯">
프로그래밍 언어 <= "태그"에 대한 라벨> </ 라벨>
<입력 한 id = "태그"크기 = "50">
</ DIV>
</ BODY>
</ HTML>
여러 값, 원격
사용법 : 새의 이름을 얻기 위해 적어도 두 개의 문자를 입력합니다. 값을 선택하고 문자가 추가 가치를 계속 입력합니다.
이 예는 여러 자동 입력 할 수있는 단일 텍스트 필드의 값을 달성하기 위해 소스 옵션 및 이벤트를 사용하는 방법을 보여줍니다.
<! DOCTYPE html로>
<HTML LANG = "EN">
<헤드>
<메타 문자 집합 = "UTF-8">
<제목> jQuery를 UI 자동 완성 기능 (자동 완성) - 여러 개의 값, 원격 </ 제목>
<링크 REL = "스타일 시트"HREF = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<스크립트 SRC = "// code.jquery.com/jquery-1.9.1.js"> </ script>
<스크립트 SRC = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
<링크 REL = "스타일 시트"HREF = "http://jqueryui.com/resources/demos/style.css">
<스타일>
.ui-자동 완성 로딩 {
배경 : 흰색의 URL ( '이미지 / UI-anim_basic_16x16.gif')을 마우스 오른쪽 센터 노 - 반복;
}
</ 스타일>
<스크립트>
$ (함수 () {
기능 분할 (발) {
val.split를 반환 (/ \ s의 * /);
}
기능 extractLast (용어) {
() .pop 분할 (용어)을 반환;
}
$ ( "#birds")
// 당신은 .bind ( "에서 KeyDown", 기능 (이벤트를 텍스트 필드를 떠나지 않고 항목을 선택하면) {
(event.keyCode === $ .ui.keyCode.TAB 경우 &&
$ (이) .DATA ( "UI-자동 완성") .menu.active) {
에서는 event.preventDefault ();
}
})
.autocomplete ({
출처 : 기능 (요청, 응답) {
$ .getJSON ( "Search.php", {
용어 : extractLast (request.term)
}, 응답);
},
검색 : 함수 () {
// 사용자의 최소 길이 VAR 기간 = extractLast (this.value);
경우 (term.length <2) {
false를 반환;
}
},
초점 : 함수 () {
// 방지에 초점 삽입 값이 false를 반환 획득하는 단계;
},
선택 기능 (이벤트, UI)를 {
var에 조건 = 분할 (this.value);
// () 현재의 입력 terms.pop를 제거;
// 선택된 옵션 terms.push (ui.item.value)를 추가;
// + 공간 terms.push ( "")의 말에 쉼표를 추가, 자리 표시 자 추가;
this.value = terms.join ( ",");
false를 반환;
}
});
});
</ 스크립트>
</ 헤드>
<바디>
<사업부 클래스 = "UI 위젯">
<= "새"에 대한 라벨> 새 </ 라벨>
<입력 한 id = "새"크기 = "50">
</ DIV>
</ BODY>
</ HTML>
원격 데이터 소스 JSONP
텍스트 필드에 문자를 입력하면 자동 완성 구성 요소는 자문 결과를 제공합니다. 텍스트 필드에서 적어도 두 개의 문자를 입력 할 때,이 예에서, 상기 관련 도시의 이름을 표시한다.
이 예에서, 데이터 소스가된다 가 WebService geonames.org . 소자 후의 텍스트 필드의 선택은 도시의 이름이지만, 올바른 엔트리를 찾기 위해 더 많은 정보가 표시되지만. 데이터는 또한 그 결과는 아래의 상자에 표시됩니다, 콜백이 될 수 있습니다.
<! DOCTYPE html로>
<HTML LANG = "EN">
<헤드>
<메타 문자 집합 = "UTF-8">
<제목> jQuery를 UI 자동 완성 기능 (자동 완성) - JSONP 원격 데이터 소스 </ 제목>
<링크 REL = "스타일 시트"HREF = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<스크립트 SRC = "// code.jquery.com/jquery-1.9.1.js"> </ script>
<스크립트 SRC = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
<링크 REL = "스타일 시트"HREF = "http://jqueryui.com/resources/demos/style.css">
<스타일>
.ui-자동 완성 로딩 {
배경 : 흰색의 URL ( '이미지 / UI-anim_basic_16x16.gif')을 마우스 오른쪽 센터 노 - 반복;
}
#city {폭 : 25em;}
</ 스타일>
<스크립트>
$ (함수 () {
함수 로그 (메시지) {
$ ( "<DIV>")는 .text (메시지) .prependTo ( "#log");
$ ( "#log")를 .scrollTop (0);
}
$ ( "#city") .autocomplete ({
출처 : 기능 (요청, 응답) {
$ 아약스 ({
URL : "http://ws.geonames.org/searchJSON"
dataType와 "JSONP"
데이터 : {
featureClass : "P",
스타일 : "전체"
maxRows를 : 12
name_startsWith : request.term
},
성공 : 기능 (데이터) {
응답 ($의 .MAP (data.geonames, 기능 (항목) {
{반환
라벨 : item.name + (item.adminName1 ","+ item.adminName1 :? "") + ","+ item.countryName,
값 : item.name
}
}));
}
});
},
MINLENGTH : 2,
선택 기능 (이벤트, UI)를 {
로그 (ui.item?
"선택 :"+ ui.item.label :
) + this.value "아무것도 선택하지, 입력했다";
},
여 : 함수 () {
$ (이) .removeClass ( "UI 코너 모두") .addClass ( "UI 코너 탑");
},
가까이 : 함수 () {
$ (이) .removeClass ( "UI 코너 탑") .addClass ( "UI 코너 모두");
}
});
});
</ 스크립트>
</ 헤드>
<바디>
<사업부 클래스 = "UI 위젯">
<= "도시"에 대한 라벨> 도시 : </ 라벨>
<입력 한 id = "도시">
<a의 href="http://geonames.org"의 target="_blank"> geonames.org </a>에 의해 구동
</ DIV>
<사업부 클래스 = "UI 위젯"스타일 = "여백 - 가기 : 2EM; 글꼴 - 가족 : 굴림">
결과 :
<사업부 아이디 = "로그인"스타일 = "높이 : 200 픽셀, 폭 : 300 픽셀, 오버플로 : 자동;"클래스 = "UI 위젯 콘텐츠"> </ DIV>
</ DIV>
</ BODY>
</ HTML>
원격 데이터 소스
텍스트 필드에 문자를 입력하면 자동 완성 구성 요소는 자문 결과를 제공합니다. 텍스트 필드에 두 글자 이상 입력 할 때이 예에서, 그것은 새의 관련 이름을 표시합니다.
이 예에서, 데이터 소스는 간단한 소스 옵션을 지정할 JSON 데이터 서버 측 스크립트를 반환한다. 또한, MINLENGTH 옵션은 쿼리 반환 너무 많은 결과를 피하기 몇 가지 의견을 표시 할 이벤트를 선택, 2로 설정됩니다.
<! DOCTYPE html로>
<HTML LANG = "EN">
<헤드>
<메타 문자 집합 = "UTF-8">
<제목> jQuery를 UI 자동 완성 기능 (자동 완성) - 원격 데이터 소스 </ 제목>
<링크 REL = "스타일 시트"HREF = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<스크립트 SRC = "// code.jquery.com/jquery-1.9.1.js"> </ script>
<스크립트 SRC = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
<링크 REL = "스타일 시트"HREF = "http://jqueryui.com/resources/demos/style.css">
<스타일>
.ui-자동 완성 로딩 {
배경 : 흰색의 URL ( '이미지 / UI-anim_basic_16x16.gif')을 마우스 오른쪽 센터 노 - 반복;
}
</ 스타일>
<스크립트>
$ (함수 () {
함수 로그 (메시지) {
$ ( "<DIV>")는 .text (메시지) .prependTo ( "#log");
$ ( "#log")를 .scrollTop (0);
}
$ ( "#birds") .autocomplete ({
출처 : "search.php"
MINLENGTH : 2,
선택 기능 (이벤트, UI)를 {
로그 (ui.item?
"선택 :"+ ui.item.value + "일명"+ ui.item.id :
) + this.value "아무것도 선택하지, 입력했다";
}
});
});
</ 스크립트>
</ 헤드>
<바디>
<사업부 클래스 = "UI 위젯">
<= "새"에 대한 라벨> 새 </ 라벨>
<입력 한 id = "새">
</ DIV>
<사업부 클래스 = "UI 위젯"스타일 = "여백 - 가기 : 2EM; 글꼴 - 가족 : 굴림">
결과 :
<사업부 아이디 = "로그인"스타일 = "높이 : 200 픽셀, 폭 : 300 픽셀, 오버플로 : 자동;"클래스 = "UI 위젯 콘텐츠"> </ DIV>
</ DIV>
</ BODY>
</ HTML>
원격 캐시
텍스트 필드에 문자를 입력하면 자동 완성 구성 요소는 자문 결과를 제공합니다. 텍스트 필드에 두 글자 이상 입력 할 때이 예에서, 그것은 새의 관련 이름을 표시합니다.
성능을 향상시키기 위해, 여기에 몇 로컬 캐시, 유사한 원격 데이터 소스의 다른 인스턴스를 추가합니다. 여기서, 단지 질의 캐시 저장하고, 캐시가 다수의 값으로 확장 될 수 있으며, 각각의 엔트리는 값이다.
<! DOCTYPE html로>
<HTML LANG = "EN">
<헤드>
<메타 문자 집합 = "UTF-8">
<제목> jQuery를 UI 자동 완성 기능 (자동 완성) - 원격 캐시 </ 제목>
<링크 REL = "스타일 시트"HREF = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<스크립트 SRC = "// code.jquery.com/jquery-1.9.1.js"> </ script>
<스크립트 SRC = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
<링크 REL = "스타일 시트"HREF = "http://jqueryui.com/resources/demos/style.css">
<스타일>
.ui-자동 완성 로딩 {
배경 : 흰색의 URL ( '이미지 / UI-anim_basic_16x16.gif')을 마우스 오른쪽 센터 노 - 반복;
}
</ 스타일>
<스크립트>
$ (함수 () {
VAR 캐시 = {};
$ ( "#birds") .autocomplete ({
MINLENGTH : 2,
출처 : 기능 (요청, 응답) {
VAR 기간 = request.term;
경우 (캐시 용어) {
응답 (캐시 [용어]);
반환;
}
$ .getJSON ( "Search.php", 요청, 기능 (데이터, 상태, XHR) {
캐시 [용어] 데이터 =;
응답 (데이터);
});
}
});
});
</ 스크립트>
</ 헤드>
<바디>
<사업부 클래스 = "UI 위젯">
<= "새"에 대한 라벨> 새 </ 라벨>
<입력 한 id = "새">
</ DIV>
</ BODY>
</ HTML>
스크롤 가능한 결과
옵션의 긴 목록을 표시 할 때, 당신은 단순히 너무 메뉴를 표시하는 자동 완성 메뉴를 방지하기 위해 최대 높이를 설정할 수 있습니다. 긴 스크롤리스트의 결과를 얻기 위해 "a"또는 "S"를 입력하십시오.
<! DOCTYPE html로>
<HTML LANG = "EN">
<헤드>
<메타 문자 집합 = "UTF-8">
<제목> jQuery를 UI 자동 완성 기능 (자동 완성) - 스크롤 가능한 결과 </ 제목>
<링크 REL = "스타일 시트"HREF = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<스크립트 SRC = "// code.jquery.com/jquery-1.9.1.js"> </ script>
<스크립트 SRC = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
<링크 REL = "스타일 시트"HREF = "http://jqueryui.com/resources/demos/style.css">
<스타일>
.ui-자동 완성 {
최대 높이 : 100 픽셀;
오버 플로우-Y : 자동;
/ * 가로 스크롤 막대를 방지 * /
오버 플로우 엑스 : 숨겨진;
}
/ * IE 6은 최대 높이를 지원하지 않습니다
* / * 우리 대신 높이 사용하지만,이 메뉴는 항상 높이로 표시 강제
* html로 .ui-자동 완성 {
높이 : 100 픽셀;
}
</ 스타일>
<스크립트>
$ (함수 () {
var에 availableTags의 = [
"액션"
"AppleScript로"
"ASP를"
"BASIC"
"C",
"C ++",
"Clojure의"
"COBOL"
"ColdFusion에서"
"얼랑"
"포트란"
"멋져요",
"하스켈"
"자바"
"자바 스크립트"
"리스프"
"펄"
"PHP"
"파이썬"
"루비",
"스칼라"
"계획"
]
$ ( "#tags") .autocomplete ({
출처 : availableTags
});
});
</ 스크립트>
</ 헤드>
<바디>
<사업부 클래스 = "UI 위젯">
<= "태그"에 대한 라벨> 태그 : </ 라벨>
<입력 한 id = "태그">
</ DIV>
</ BODY>
</ HTML>
XML 데이터
이 예에서는 어떤 XML 데이터를 얻는 방법을 도시하고 해결하고 데이터 소스로서 자동 완성으로 제공하는 방법의 jQuery를 사용한다.
또한 원격 XML 데이터 소스를 참조 해결로서 사용될 예는 분석 - 각 소스 콜백 요청에 의해 발생한다.
<! DOCTYPE html로>
<HTML LANG = "EN">
<헤드>
<메타 문자 집합 = "UTF-8">
<제목> jQuery를 UI 자동 완성 기능 (자동 완성) - XML 데이터 </ 제목>
<링크 REL = "스타일 시트"HREF = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<스크립트 SRC = "// code.jquery.com/jquery-1.9.1.js"> </ script>
<스크립트 SRC = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
<링크 REL = "스타일 시트"HREF = "http://jqueryui.com/resources/demos/style.css">
<스타일>
.ui-자동 완성 로딩 {배경 : 흰색의 URL ( '이미지 / UI-anim_basic_16x16.gif')을 마우스 오른쪽 센터 노 - 반복;}
</ 스타일>
<스크립트>
$ (함수 () {
함수 로그 (메시지) {
$ ( "<사업부 />")는 .text (메시지) .prependTo ( "#log");
$ ( "#log") .attr ( "ScrollTop", 0);
}
$ 아약스 ({
URL : "london.xml"
dataType와 "XML"
성공 : 기능 (xmlResponse) {
VAR 데이터 =의 $ ( "geoname", xmlResponse) .MAP (함수 () {
{반환
값 : $ ( "이름"이)는 .text () + ","+
($ .trim ($ ( "COUNTRYNAME"이)는 .text ()) || "(알 수없는 국가)"),
ID : $ ( "geonameId"이)는 .text ()
};
.}) () 얻으십시오;
$ ( "#birds") .autocomplete ({
출처 : 데이터,
MINLENGTH : 0,
선택 기능 (이벤트, UI)를 {
로그 (ui.item?
"선택 :"+ ui.item.value + ", geonameId을"+ ui.item.id :
) + this.value "아무것도 선택하지, 입력했다";
}
});
}
});
});
</ 스크립트>
</ 헤드>
<바디>
<사업부 클래스 = "UI 위젯">
<= "새"에 대한 라벨> 런던 경기 : </ 라벨>
<입력 한 id = "새">
</ DIV>
<사업부 클래스 = "UI 위젯"스타일 = "여백 - 가기 : 2EM; 글꼴 - 가족 : 굴림">
결과 :
<사업부 아이디 = "로그인"스타일 = "높이 : 200 픽셀, 폭 : 300 픽셀, 오버플로 : 자동;"클래스 = "UI 위젯 콘텐츠"> </ DIV>
</ DIV>
</ BODY>
</ HTML>