jQuery UI 자동 완성 지침_jquery

소개
최근 jQuery UI 업데이트에는 자동 완성 컨트롤인 AutoComplete가 추가되었으며, 이는 또 다른 강력한 개발 도구를 제공합니다. 다음은 이 컨트롤의 사용 방법을 소개합니다.
우선 jQuery UI는 jQuery를 기반으로 하기 때문에 먼저 페이지에서 jQuery 스크립트 라이브러리를 참조한 다음 jQuery UI 라이브러리를 참조해야 합니다. jQuery UI 라이브러리의 경우 라이브러리 전체를 참조하거나 그냥 참조할 수 있습니다. 현재 페이지에서 사용되는 라이브러리입니다.
jQuery UI 다운로드 주소: http://jqueryui.com/download
1. 기본 구성
일반적으로 작은 페이지의 경우 독립적인 스크립트를 참조하는 것이 줄어듭니다. 크기가 다르므로 여기서는 별도의 스크립트를 사용합니다. 자동 완성에는 다음 스크립트 파일이 포함됩니다.

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

< script src= "jquery.ui.widget.js">

물론 페이지에 입력 상자가 있어야 합니다.

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

위젯">
< label for="tags">
태그:

2. 로컬 데이터 사용

기본적인 사용법은 매우 간단합니다. 프롬프트된 데이터는 어레이에서 나올 수 있습니다. 매개변수 객체의 source 속성을 통해 데이터 소스를 설정합니다.

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

자동 완성 효과가 작동 중입니다.

3. 원격 데이터 소스 사용

소스 속성에 원격 주소를 나타내는 문자열을 설정하고 이 원격 주소를 통해 json 데이터를 얻을 수도 있습니다. 자동 완성의 경우 주소가 제공되면 사용자가 입력 상자에 입력을 시작하면 요청에 있는 term이라는 매개변수가 현재 입력된 콘텐츠를 나타냅니다. 결과는 json 형식의 데이터여야 합니다.
JSON에 대한 자세한 설명은 여기에서 확인할 수 있습니다: http://www.json.org/json-zh.html



코드 복사

코드는 다음과 같습니다: var url = "serviceHandler.ashx" $("#auto").autocomplete(

{

source: url
}
);


일반 핸들러를 통해 데이터를 반환할 수 있습니다. 반환된 문자열은 JSON 형식 요구 사항을 준수해야 하며 문자열은 큰따옴표를 사용해야 한다는 점에 유의하는 것이 중요합니다.

코드 복사

코드는 다음과 같습니다. 공용 클래스 serviceHandler: IHttpHandler { public void ProcessRequest(HttpContext 컨텍스트) {

context.Response.ContentType = "text/plain";

HttpResponse 응답 = context.Response;
System.IO.TextWriter 작가 = response.Output; // 참고, 표준 JSON 형식 문자열이어야 하며 큰따옴표를 사용해야 합니다.
writer.Write("["One", "Two", "Three"]")
}
public bool IsReusable {
get {
false 반환
}
}
}


일반적으로 원격 데이터를 사용할 때 몇 개의 문자를 입력한 후 사용자에게 메시지를 표시하고 싶습니다. 이는 minLength 속성을 통해 설정할 수 있습니다. 로컬 데이터 소스인 경우 일반적으로 0입니다. 큰 숫자 데이터 상황에 따라 이 값을 적절하게 늘려야 합니다. 이러한 방식으로 스크립트는 다음과 같습니다.

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

var url = "serviceHandler.ashx";
$("#auto").autocomplete(
{
소스: url,
minLength: 2
}
)

IV.캐시가 있는 원격 데이터 소스
소스에 대한 기능을 제공함으로써 원격 데이터에 대한 로컬 캐시를 추가할 수 있습니다. 이렇게 하면 매번 서버에 쿼리할 필요가 없습니다.

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

$(function () {
var url = "serviceHandler.ashx";
var 캐시 = {}, lastXhr
$("#auto").autocomplete({
minLength: 2,
소스: 함수(요청, response) {
var term = request.term;
if (캐시 내 용어) {
response(cache[term])
return;
lastXhr = $. getJSON(url , request, function (data, status, xhr) {
cache[term] = data;
if (xhr === lastXhr) {
response(data);
}
} );
}
})
}
);