제16장 문의 전단-메일박스 자동 완성

학습 요점: 1.데이터 소스 function2.메일박스 자동 완성 본 수업은 우리가source 속성을 자동적으로 보완하는function 리셋 함수를 통해 동적으로 우리의 데이터 원본을 설정하여 메일박스 완성 기능을 실현할 수 있도록 합니다.1. 데이터 원본 function 자동 완성 UI의 소스는 수조일 뿐만 아니라 function 리셋 함수도 있습니다.동적 데이터 원본을 설정하는 두 개의 매개 변수를 제공합니다.

$('#email').autocomplete({
source : function (request, response) {
alert(request.term); // 
response(['aa', 'aaaa', 'aaaaaa', 'bb']); // 
},
});

주의: 여기의response는 키워드를 검색하는 데 따라 결과와 상관없이 전체 결과를 필터링하지 않습니다.소스 데이터 원본은 그 자체가 당신에게 동적 변화를 주기 때문에 사용자가 정의하여 시스템에 내장된 검색 능력을 포기합니다.2. 메일박스 자동 완성

$('#email').autocomplete({
autoFocus : true,
delay : 0,
source : function (request, response) {
var hosts = ['qq.com','163.com', '263.com', 'gmail.com', 'hotmail.com'], // 
term = request.term, // 
ix = term.indexOf('@'), //@
name = term, // 
host = '', // 
result = []; // 
// 
result.push(term);
if (ix > -1) { // @ 
name = term.slice(0, ix); // 
host = term.slice(ix + 1); // 
}
if (name) {
// 
var findedHosts = (host ? $.grep(hosts, function (value, index) {
return value.indexOf(host) > -1;
}) : hosts),
// 
findedResults = $.map(findedHosts, function (value, index) {
return name + '@' + value;
});
// 
result = result.concat(findedResults);
}
response(result);
},
});