jQuery UI 자동 완성 경험 Sharing_jquery

지원되는 데이터 소스
jQuery UI 자동 완성은 주로 문자열 배열과 JSON이라는 두 가지 데이터 형식을 지원합니다.
일반적인 배열 형식에는 다음과 같이 특별한 것이 없습니다.

코드 복사 코드는 다음과 같습니다.

[ "cnblogs","blog garden","囧月"]

JSON 형식 배열의 경우 다음과 같이 레이블 및 값 속성이 있어야 합니다.

코드 복사 코드는 다음과 같습니다.

[{label: "blog garden", value: "cnblogs"}, { label: "囧月", value: "囧Month"}]

label 속성은 자동 완성 팝업 메뉴에 표시하는 데 사용되며, value 속성은 선택 후 텍스트 상자에 할당된 값입니다. .
속성 중 하나가 지정되지 않으면 다음과 같이 다른 속성으로 대체됩니다(즉, 값과 라벨 값이 동일함).

복사 code 코드는 다음과 같습니다.

[{label: "cnblogs"}, {label: "囧月"}]
[{value: "cnblogs"}, {value: "囧月" "}]

레이블이나 값을 모두 지정하지 않으면 자동 완성 프롬프트에 사용할 수 없습니다.
또한 서버의 JSON 키 출력은 다음과 같이 큰따옴표로 묶어야 합니다.

코드 복사 코드는 다음과 같습니다. 다음은 다음과 같습니다.

[{"label": "Blog Garden", "value": "cnblogs"}, {"label": "囧月", "value": "囧月"}]

그렇지 않으면 파서 오류가 발생할 수 있습니다.
주요 매개변수
jQuery UI Autocomplete에서 일반적으로 사용되는 매개변수는 다음과 같습니다.
소스: 데이터 소스를 지정하는 데 사용되며 유형은 문자열, 배열, 함수입니다.
문자열: ajax 요청에 사용되는 서버측 주소, 반환된 배열/JSON 형식
배열: 즉 문자열 배열 또는 JSON 배열
함수(요청, 응답): request.term, response([Array])를 통해 입력 값을 가져와서 데이터를 표시합니다. (JSONP는 이것이다. 방법)
minLength : 입력란의 문자열 길이가 minLength에 도달하면 자동완성 활성화
autoFocus : 자동완성 선택 메뉴가 뜨면 자동으로 첫 번째 선택
delay : 몇 밀리초 지연할지 자동 완성 활성화
기타 일반적으로 사용되지 않는 내용은 나열되지 않습니다.
사용법
페이지에 다음 입력 상자가 있다고 가정합니다.

AJAX 요청
소스를 다음과 같이 지정합니다. 서버측 주소 구현 방법은 다음과 같습니다.

코드 복사 코드는 다음과 같습니다.

$("#autocomp") .autocomplete({
source: "remote.ashx",
minLength: 2
})

다음에서 받으세요. 서버측에서 해당 결과를 출력합니다. 기본 전달에 주의하세요. 매개변수 이름은 term입니다:

코드 복사

public void ProcessRequest(HttpContext context )
{
// 쿼리 매개변수 이름의 기본값은 term
string query = context.Request.QueryString["term"입니다. ];
context.Response.ContentType = "text/javascript";
//출력 문자열 배열 또는 JSON 배열
context.Response.Write("[{"label":"blog garden"," value":"cnblogs"},{"label":"囧月" ,"value":"囧月"}]")
}

로컬 배열/JSON 배열

코드 복사 코드는 다음과 같습니다.

// 로컬 문자열 배열
var availableTags = [
"C#",
"C ",
"Java",
"JavaScript",
"ASP",
"ASP.NET",
" JSP",
"PHP",
"Python",
"Ruby"
];
$("#local1").autocomplete({
출처: availableTags
})// 로컬 json 배열
var availableTagsJSON = [
{ 라벨: "C# 언어", 값: "C#" },
{ 라벨: "C 언어", 값: "C " },
{ 라벨: "Java Language", 값: " Java" },
{ 라벨: "JavaScript 언어", 값: "JavaScript" },
{ 라벨: "ASP. NET", 값: "ASP.NET" },
{ 라벨: " JSP", 값: "JSP" },
{ 라벨: "PHP", 값: "PHP" },
{ 라벨: "Python", 값: "Python" },
{ 라벨: "Ruby", 값: "Ruby" }
]
$("#local2").autocomplete({
출처: availableTagsJSON
})


콜백 함수 방식
소스를 커스텀 함수로 지정하여 커스텀 데이터를 획득하는 함수는 주로 2개의 매개변수(요청, 응답)를 가지고 있으며, 이는 입력 값을 획득하고 결과를 제시하는 데 사용됩니다.
로컬 어레이 모드에서 데이터 가져오기(Sina Weibo 로그인 모방)

코드 복사 코드는 다음과 같습니다.

var 호스트 = ["gmail.com", "live.com", "hotmail.com", "yahoo.com", "cnblogs.com", "Mars.com", "囧月. com"];
$("#email1").autocomplete({
autoFocus: true,
source: function(request, response) {
var term = request.term, //request .term은 입력 문자열입니다.
ix = term.indexOf("@"),
name = term, // 사용자 이름
host = "", // 도메인 이름
result = [] ; // result
result.push(term);
// result.push({ label: term, value: term }) // json 형식
if (ix > -1) {
name = term.slice(0, ix);
host = term.slice(ix 1);
}
if (name) {
varfoundHosts = (host ? $.grep (hosts, function(value) {
return value.indexOf(host) > -1;
}) : 호스트),
findedResults = $.map(findedHosts, function(value) {
return name "@" value; //문자열 형식 반환
// return { label: name " @ " value, value: name "@" value } // json 형식
}); result = result.concat($.makeArray(findedResults));
}
response(result);//결과 제시
}
});
JSONP를 통해 데이터 가져오기

공식 DEMO에서 직접 가져와서 원격 서버에 Ajax 요청을 보낸 다음 반환 결과를 처리하고 마지막으로 응답을 통해 표시합니다.


코드 복사

코드는 다음과 같습니다. $("#jsonp").autocomplete({ 출처: function(request , response) {

$.ajax({

url: "http://ws.geonames.org/searchJSON",
dataType: "jsonp",
data: {
featureClass: "P",
style: "full",
maxRows: 12,
name_startsWith: request.term
},
success: function(data) {
response($ .map(data.genames, function(item) {
return {
label: item.name (item.adminName1 ? ", " item.adminName1 : "") ", " item.countryName,
값: 항목.이름
}
}));
}
})
},
최소 길이: 2



주요 이벤트

jQuery UI Autocomplete에는 일부 단계에서 추가 제어에 사용할 수 있는 몇 가지 이벤트가 있습니다.

create(event, ui): Autocomplete가 생성되면 다음을 수행할 수 있습니다. 에서 이 이벤트를 사용하여 모양을 일부 제어
search(event, ui): 요청을 시작하기 전에 이 이벤트에서 false를 반환하여 요청을 취소할 수 있습니다. open(event, ui): Autocomplete의 결과 목록이 표시될 때 pops up focus(event, ui): Autocomplete 결과 목록의 항목 중 하나라도 포커스를 받으면 ui.item이 포커스를 받는 항목입니다.
select(event, ui): Autocomplete 결과 목록의 항목 중 하나를 선택한 경우 , ui.item은 선택된 항목입니다
close(event, ui): 자동완성 결과 목록이 닫히는 경우
change(event, ui): 값이 변경되면 ui.item이 선택된 항목입니다
이러한 이벤트의 ui 매개변수 항목 속성(있는 경우)에는 소스의 데이터 세트가 배열인지 JSON 배열인지에 관계없이 다음과 같이 기본적으로 레이블 및 값 속성이 있습니다.




코드 복사

코드는 다음과 같습니다. ["cnblogs","blog garden","囧月"] [{레이블: "blog garden", 값: " cnblogs"}, {레이블: "囧月", 값: "囧月"}] [{label: "囧月园", 값: "cnblogs" , id: "1"}, {label: "囧月" Month", value: "囧月", id: "2"}]

세 번째 유형인 경우에는 ui.item.id 값도 가져옵니다.
이러한 이벤트는 다음과 같이 2가지 방법으로 바인딩할 수 있습니다.

코드 복사

코드는 다음과 같습니다. // 매개변수 $("#autocomp").autocomplete({ source: availableTags

, select: function(e, ui) {

alert(ui. item .value)
}
});
// 바인드를 통해 바인딩
$("#autocomp").bind("autocompleteselect", function(e, ui) {
경고 (ui.item.value)
})


바인드를 통해 바인딩에 사용되는 이벤트 이름은 "autocomplete"입니다. "select"와 같은 이벤트 이름은 "autocompleteselect"입니다.
여러 값에 대한 자동 완성 ​​
일반적인 상황에서 입력 상자의 자동 완성에는 하나의 값만 필요합니다(예: javascript). 여러 값이 필요한 경우(예: javascript, c#, asp.net), 추가 처리를 위해 일부 이벤트 바인딩이 필요합니다.
입력 상자의 값이 자동 완성의 단일 값으로 대체되는 것을 방지하려면 포커스 이벤트에서 false를 반환합니다.
여러 값을 결합합니다. select 이벤트
요소의 keydown 이벤트에서 수행 일부 처리, 이유는 1과 동일
콜백 함수 소스를 사용하여 마지막 입력 값을 가져오고 결과 표시
또는 공식 DEMO 사용 코드 직접 작성:

코드 복사 코드는 다음과 같습니다.

// 여러 값 구분 ​​쉼표로
function Split(val) {
return val.split( /,s*/)
}
//입력의 마지막 값 추출
function extractLast(term ) {
return Split(term).pop();
}
// Tab 키를 누르면 입력 상자 값 설정 취소
function keyDown(event) {
if (event.keyCode === $.ui.keyCode.TAB &&
$(this).data("autocomplete").menu.active) {
event.preventDefault()
}
}
var options = {
// 포커스 가져오기
focus: function( ) {
// 포커스에 값 삽입 방지
return false; // 자동 완성 팝업 메뉴에서 값을 선택할 때 입력란 끝에 추가하고 쉼표로 구분합니다.
select: function(event, ui) {
var terms = Split(this. value);
// 현재 입력 제거
terms.pop()
// 선택한 항목 추가
terms.push(ui.item.value)// add 끝에 쉼표와 공백을 가져오는 자리 표시자
terms.push("");
this.value = terms .join(", ")
return false; 🎜>};
// 다중 값, 로컬 배열
$("#local3").bind("keydown" , keyDown)
.autocomplete($.extend(options, {
minLength : 2,
source: function(request, response) {
// 자동 완성으로 다시 위임하지만 마지막 용어 추출
response($.ui.autocomplete.filter(
availableTags, extractLast( request.term)));
}
}));
// 다중 값, ajax는 json을 반환합니다
$("#ajax3").bind("keydown", keyDown)
.autocomplete($.extend(options, {
minLength: 2,
source: function(request, response) {
$.getJSON("remoteJSON.ashx", {
term: extractLast (request.term)
}, response)
}
}));


End
마지막으로 코드를 입력하세요.
다운로드하려면 클릭하세요
.

자세한 내용은 jQuery UI 자동완성 공식 데모를 참조하세요.
http://jqueryui.com/demos/autocomplete