jQuery.Autocomplete는 자동 완성 기능을 구현합니다(자세한 설명)_jquery

1. jquery.autocomplete 참조 주소
http://bassistance.de/jquery-plugins/jquery-plugin-autocomplete/
http://docs.jquery.com/Plugins/Autocomplete
2. jquery.autocomplete 상세 설명
구문:
autocomplete(urlor data, [options])
매개변수:
url 또는 데이터: array 또는 url
[옵션]: 선택 사항, 옵션은 다음과 같이 설명됩니다.
1) minChars(숫자)
자동 완성을 실행하기 전에 사용자가 입력해야 하는 최소 문자 수, 기본값: 0으로 설정된 경우 1 , 입력 상자를 두 번 클릭하거나 입력 상자의 내용을 삭제할 때 목록을 표시합니다.
2) width(숫자)
드롭다운 상자의 너비를 지정합니다. 기본값: 입력 요소의 너비
3) max(숫자)
자동 완성 드롭다운 표시 개수 항목, 기본값: 10
4) 지연(숫자)
키 입력 후 자동 완성을 활성화하는 지연 시간(밀리초) 기본값: 원격의 경우 400, 로컬의 경우 10
5) 자동 완성(부울)
선택 시 다음 키 입력에 사용자를 자동으로 추가할지 여부. 현재 마우스 위치의 값이 입력 상자에 채워집니다. 기본값: false
6) mustMatch(Boolean)
true로 설정하면 autoComplete는 입력 상자에 일치하는 결과가 표시되도록 허용합니다. 사용자가 입력한 모든 문자는 드롭다운 상자에 표시되지 않습니다. 기본값: false
7) matchContains(Boolean)
은 내부 일치 여부를 확인합니다. ba가 foo bar의 ba와 일치하는지 여부와 같은 비교 시 문자열입니다. 캐시를 사용하는 것이 더 중요합니다. autofill과 혼합하지 마세요. 기본값: false
8) selectFirst(Boolean)
true로 설정하면 첫 번째 autoComplete 드롭다운 목록의 값은 사용자가 탭이나 Return 키를 입력하면 자동으로 선택됩니다. 비록 수동으로 선택하지는 않지만(키보드나 마우스를 사용하여) 물론 사용자가 항목을 선택하면 값이 선택됩니다. 기본값: true
9) 캐시 길이(숫자)
캐시 길이, 즉 데이터베이스에서 얻은 결과 집합에 몇 개의 레코드를 캐시해야 하는지에 대한 값입니다. 기본값: 10
10) matchSubset(Boolean)
autoComplete는 서버 쿼리의 캐싱을 사용할 수 있습니까? 캐시가 foo 쿼리 결과용인 경우 사용자가 foo를 입력하면 검색할 필요가 없습니다. 캐시는 직접 사용됩니다. 이 옵션은 일반적으로 서버의 부하를 줄이고 성능을 향상시키기 위해 활성화됩니다. 캐시 길이가 1보다 큰 경우에만 유효합니다. 기본값: true
11) matchCase (Boolean)
대소문자 구분 스위치가 켜져 있는지 비교합니다. 캐시를 사용할 때 더 중요합니다. 이전 옵션을 이해하면 FOO의 캐시에서 발을 찾아야 하는지와 마찬가지로 이해하기 어렵지 않습니다. 기본값: false
12) multiple(Boolean)
여러 값을 입력할 수 있는지 여부, 즉 여러 값을 입력하려면 autoComplete를 여러 번 사용합니다. 기본값: false
13) multipleSeparator(문자열)
예인 경우 문자 다중 선택 시 각 선택을 구분하는 데 사용됩니다. 기본값: ","
14) 스크롤(Boolean)
결과 집합이 기본 높이보다 클 때 스크롤 표시를 사용할지 여부Default: true
15) 스크롤 높이 ( 숫자)
자동 완성 프롬프트의 스크롤 높이는 픽셀 크기로 표시됩니다. 기본값: 180
16) formatItem(함수)
표시할 항목마다 고급 태그를 사용합니다. 이 함수의 경우 반환 값은 LI 요소를 사용하여 드롭다운 목록에 표시됩니다. 반환된 결과 배열, 즉 세 가지 매개변수(row, i, max)가 제공됩니다. 현재 처리된 행 수(즉, 항목 수, 1부터 시작 자연수), 현재 결과 배열의 요소 수는 항목 수입니다. 기본값: 없음, 이는 사용자 정의 처리 기능이 지정되지 않음을 의미합니다. 드롭다운 목록의 각 행에는 하나의 값만 포함됩니다.
17) formatResult(함수)
는 formatItem과 유사하지만 입력 텍스트 상자에 입력할 값의 형식을 지정할 수도 있습니다. formatItem과 동일한 세 개의 매개변수 기본값: 없음, 이는 데이터만 사용하거나 formatItem이 제공하는 값을 사용함을 의미합니다.
18) formatMatch(함수)
데이터 형식을 지정하려면 이 함수를 사용하세요. 반환 값은 내부 검색 알고리즘에 의해 사용됩니다. 매개변수 값 행
19) extraParams (Object )
백그라운드에 대한 추가 매개변수를 제공합니다(일반적으로 서버측 스크립트). 전달된 값이 { bar: 4 }이면 자동 완성기에 의해 my_autocomplete_backend.php?q=foo&bar=4로 구문 분석됩니다(현재 사용자가 foo를 입력했다고 가정). >20) 결과(핸들러) 반환: jQuery
이 이벤트는 사용자가 항목을 선택한 후 트리거됩니다. 매개변수는 다음과 같습니다.
이벤트: 이벤트 개체입니다.
데이터: 선택한 데이터 행입니다. .
formatted: formatResult 함수에서 반환된 값
예:
$("#singleBirdRemote" ).result(function(event, data, formatted){
//값 할당 ​​선택 후 다른 컨트롤에 추가, 다른 이벤트 트리거 등

3. jquery.autocomplete 사용 팁
1) jquery.autocomplete에 필요한 데이터 소스는 다음과 같습니다. 로컬 데이터 및 원격 데이터 로컬 데이터 소스는 로컬 js 배열 또는 로컬 json 객체입니다.
var data = [" c ","java", "php", "coldfusion"," javascript"];
var data = [{text:'Link A', url:'/page1'}, {text:'Link B' , url: '/page2'} ];
원격 주소에서 기본적으로 전달되는 매개변수는 q(입력 값), 제한(반환된 결과의 최대값)입니다. extraParams를 사용하여 다른 매개변수를 전달할 수 있으며 원격 데이터 소스에는 고정 형식의 데이터가 필요합니다. 반환 결과는 다음과 같습니다: " "각 데이터 행을 분할하려면 "|"를 사용하여 다음과 같이 각 데이터 행의 각 요소를 분할합니다.
백엔드 C# 코드:

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

string data = "c n java n php n coldfusion n javascript"

string data = "{text:'LinkA', url:'/page1 '} n {text:'링크 B', url: '/page2'} ";


4. jquery.autocomplete 인스턴스
1) 로컬 데이터 소스 호출 방법
방법 1:

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

$("#tags").autocomplete(["c ","java", "php", "coldfusion"," javascript" ], {
너비: 320,
최대: 4,
하이라이트: false,
multiple: true,
multipleSeparator: "",
scroll: true,
scrollHeight : 300
});

방법 2:

코드 복사 코드

var data = [{text:'Link A', url: '/page1'}, {text:'Link B', url: '/page2'} ];
$( "...").autocomplete(data,{
formatItem: function(item) {
return item.text;
}
}).result(function(event) ,item) {
location.href = item.url;
})

2) 원격 데이터 소스 호출 방법
방법 1:
프런트엔드 js

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

$(document ).ready(function() {
$("#Login").focus().autocomplete("/ajax/Account", {
formatItem: 함수(행, i,max) {
var obj =eval("(" row ")"); //js 객체로 변환
return obj.Text
},
formatResult: function(row) {
var obj =eval ("(" row ")"); //js 객체로 변환
return obj.Text;
}
}).result(function(event, item) {
var obj = eval ("(" item ")"); //js 객체로 변환
$("#link").attr("href",obj.url); );
});

백엔드 C#(mvc) 코드:

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

public ContentResult GetUserAccount(string q)

{
string strResult = ""
//...쿼리 데이터 작업 ..
//...데이터 형식 지정...
//형식 지정 결과는
strResult = "{text:'Link A', url:'/page1'}n {text :'Link B', url: '/page2'} ";
return Content(strResult);
}


방법 2:

프론트엔드 js

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

< scripttype="text/javascript">

$(document ).ready(function() {
$.getJSON("/ajax/Account",function(data) {
$("#Login ").focus().autocomplete(data, {
formatItem: function(item,i, max) {
return item.Text;
},
formatResult:function(item) {
return item.Text;
}
} ).result(function(event, item){
$("#link").attr("href",item.url);
});
}) ;




백엔드 C#(mvc) 코드:

코드 복사 코드는 다음과 같습니다. publicContentResult 계정(문자열 q)

{

string strResult = "";//...데이터 쿼리 작업..
//...데이터 형식 지정...
//형식 지정 결과는
strResult = "[ {"text":"LinkA", "url":"/page1" }, {"text":"LinkB", "url": "/page2"} ]";
return Content(strResult);
}