>웹 프론트엔드 >JS 튜토리얼 >jquery.AutoComplete.js 중국어 개정 버전(firefox 지원)_jquery

jquery.AutoComplete.js 중국어 개정 버전(firefox 지원)_jquery

WBOY
WBOY원래의
2016-05-16 18:29:551263검색
코드 복사 코드는 다음과 같습니다.

jQuery.autocomplete = function(input, options) {
// 자신에 대한 링크 만들기
var me = this;
// 입력 요소에 대한 jQuery 객체 생성
var $input = $(input).attr("autocomplete", "off");
// 필요한 경우 inputClass 적용
if (options.inputClass) $input.addClass(options.inputClass);
// 결과 생성
var results = document.createElement("div");
// 결과를 위한 jQuery 객체 생성
var $results = $(results);
$results.hide().addClass(options.resultsClass).css("위치", "절대");
if (options.width > 0) $results.css("width", options.width);
// 본문 요소에 추가
$("body").append(results);
input.autocompleter = 나;
var 시간 초과 = null;
var prev = "";
var active = -1;
var 캐시 = {};
var keyb = false;
var hasFocus = false;
var lastKeyPressCode = null;
// 캐시 플러시
function flashCache() {
cache = {};
cache.data = {};
cache.length = 0;
};
// 캐시 플러시
flushCache();
// 제공된 데이터 배열이 있는 경우
if (options.data != null) {
var sFirstChar = "", stMatchSets = {}, row = [];
// URL이 지정되지 않았습니다. 로컬 데이터 저장소에 맞도록 캐시 길이를 조정해야 합니다.
if (typeof options.url != "string") options.cacheLength = 1;
// 배열을 반복하고 조회 구조를 만듭니다.
for (var i = 0; i < options.data.length; i ) {
// 행이 문자열인 경우 배열을 만듭니다. 그렇지 않으면 그냥 배열을 참조하세요.
row = ((typeof options.data[i] == "string") ? [options.data[i]] : options.data[i]);
// 길이가 0이면 목록에 추가하지 마세요
if (row[0].length > 0) {
// 첫 번째 문자 가져오기
sFirstChar = row[0 ].substring(0, 1).toLowerCase();
// 이 문자에 대한 조회 배열이 없으면 지금 찾아보세요.
if (!stMatchSets[sFirstChar]) stMatchSets[sFirstChar] = [];
// 일치 항목이 문자열인 경우
stMatchSets[sFirstChar].push(row);
}
}
// 캐시에 데이터 항목 추가
for (var k in stMatchSets) {
// 캐시 크기 증가
options.cacheLength ;
// 캐시에 추가
addToCache(k, stMatchSets[k]);
}
}
$input
.keydown(function(e) {
// 마지막으로 누른 키 추적
lastKeyPressCode = e.keyCode;
스위치(e.keyCode ) {
case 38: // 위로
e.preventDefault();
moveSelect(-1);
break
case 40: // 아래로
e.preventDefault( );
moveSelect(1);
break;
case 9: // tab
case 13: // return
if (selectCurrent()) {
// 현재 필드를 흐리게 하려면
e.preventDefault()
}
default:
active = - 1;
if (timeout)clearTimeout(timeout);
timeout = setTimeout(function() { onChange(); }, options.delay)
break;
.focus(function() {
// 필드에 포커스가 있는지 추적합니다. 필드에 더 이상 포커스가 없으면 결과를 처리하면 안 됩니다
hasFocus = true;
})
.blur(function() {
// 필드에 포커스가 있는지 추적
hasFocus = false;
hideResults();
})
.bind("input", function( ) {
// @hack:firefox에서 한자 입력 지원
onChange(0, true)
});
hideResultsNow();
function onChange() {
// 다음 키를 누르면 무시합니다: [del] [shift] [capslock]
if (lastKeyPressCode == 46 || (lastKeyPressCode > 8 && lastKeyPressCode < 32)) $results.hide()를 반환합니다.
var v = $input.val();
if (v == prev) return;
이전 = v;
if (v.length >= options.minChars) {
$input.addClass(options.loadingClass);
요청데이터(v);
} else {
$input.removeClass(options.loadingClass);
$results.hide();
}
};
function moveSelect(step) {
var lis = $("li", results);
if (!lis) 반환;
활성 = 단계;
if (활성 < 0) {
활성 = 0;
} else if (active >= lis.size()) {
active = lis.size() - 1;
}
lis.removeClass("ac_over");
$(lis[active]).addClass("ac_over");
// IE의 이상한 동작
// if (lis[active] && lis[active].scrollIntoView) {
// lis[active].scrollIntoView(false);
// }
};
function selectCurrent() {
var li = $("li.ac_over", results)[0];
if (!li) {
var $li = $("li", results);
if (options.selectOnly) {
if ($li.length == 1) li = $li[0];
} else if (options.selectFirst) {
li = $li[0];
}
}
if (li) {
selectItem(li);
참을 반환합니다.
} else {
false를 반환합니다.
}
};
function selectItem(li) {
if (!li) {
li = document.createElement("li");
li.extra = [];
li.selectValue = "";
}
var v = $.trim(li.selectValue ? li.selectValue : li.innerHTML);
input.lastSelected = v;
이전 = v;
$results.html("");
$input.val(v);
hideResultsNow();
if (options.onItemSelect) setTimeout(function() { options.onItemSelect(li) }, 1);
};
// 입력 문자열의 일부 선택
function createSelection(start, end) {
// 입력 요소에 대한 참조 가져오기
var field = $input.get(0);
if (field.createTextRange) {
var selRange = field.createTextRange();
selRange.collapse(true);
selRange.moveStart("character", start);
selRange.moveEnd("character", end);
selRange.select();
} else if (field.setSelectionRange) {
field.setSelectionRange(start, end);
} else {
if (field.selectionStart) {
field.selectionStart = 시작;
field.selectionEnd = 끝;
}
}
field.focus();
};
// 첫 번째 일치 항목으로 입력 상자를 채웁니다(가장 일치한다고 가정)
function autoFill(sValue) {
// 마지막으로 누른 사용자 키가 백스페이스인 경우 자동 완성 안 함
if (lastKeyPressCode != 8) {
// 값 입력(사용자가 입력한 대소문자 유지)
$input.val($input.val() sValue.substring(prev.length) )));
// 사용자가 입력하지 않은 값 부분 선택(그러면 다음 문자가 지워짐)
createSelection(prev.length, sValue.length);
}
};
function showResults() {
// 입력 필드의 위치를 ​​지금 바로 가져옵니다(DOM이 이동된 경우)
var pos = findPos(input);
// 지정된 너비를 사용하거나 양식 요소를 기반으로 자동 계산
var iWidth = (options.width > 0) ? 옵션.폭 : $input.width();
// 재배치
$results.css({
width:parseInt(iWidth) "px",
top: (pos.y input.offsetHeight) "px",
왼쪽: pos.x "px"
}).show();
};
function hideResults() {
if (timeout)clearTimeout(timeout);
timeout = setTimeout(hideResultsNow, 200);
};
function hideResultsNow() {
if (timeout)clearTimeout(timeout);
$input.removeClass(options.loadingClass);
if ($results.is(":visible")) {
$results.hide();
}
if (options.mustMatch) {
var v = $input.val();
if (v != input.lastSelected) {
selectItem(null);
}
}
};
function receiveData(q, data) {
if (data) {
$input.removeClass(options.loadingClass);
results.innerHTML = "";
// 필드에 더 이상 포커스가 없거나 일치하는 항목이 없으면 드롭다운을 표시하지 않습니다.
if (!hasFocus || data.length == 0) return hideResultsNow();
if ($.browser.msie) {
// 달력 뒤에 스타일이 지정된 iframe을 배치하여 HTML SELECT 요소가
$results.append(document.createElement('iframe')을 통해 표시되지 않도록 합니다. );
}
results.appendChild(dataToDom(data));
// 사용자가 추가 데이터를 입력하지 않은 한 첫 번째 일치 항목이 포함된 전체 상자 자동 채우기
if (options.autoFill && ($input.val().toLowerCase() == q .toLowerCase())) autoFill(data[0][0]);
showResults();
} else {
hideResultsNow();
}
};
function parData(data) {
if (!data) 반환 null;
var 구문 분석 = [];
var 행 = data.split(options.lineSeparator);
for (var i = 0; i var row = $.trim(rows[i]);
if (행) {
parsed[parsed.length] = row.split(options.cellSeparator);
}
}
파싱된 반환;
};
function dataToDom(data) {
var ul = document.createElement("ul");
var num = 데이터.길이;
// 결과를 최대 개수로 제한했습니다.
if ((options.maxItemsToShow > 0) && (options.maxItemsToShow < num)) num = options.maxItemsToShow;
for (var i = 0; i < num; i ) {
var row = data[i];
if (!row) 계속;
var li = document.createElement("li");
if (options.formatItem) {
li.innerHTML = options.formatItem(row, i, num);
li.selectValue = 행[0];
} else {
li.innerHTML = 행[0];
li.selectValue = 행[0];
}
var extra = null;
if (row.length > 1) {
extra = [];
for (var j = 1; j < row.length; j ) {
extra[extra.length] = row[j];
}
}
li.extra = extra;
ul.appendChild(li);
$(li).hover(
function() { $("li", ul).removeClass("ac_over"); $(this).addClass("ac_over"); active = $(" li", ul).indexOf($(this).get(0)); },
function() { $(this).removeClass("ac_over"); }
).click(function( e) { e.preventDefault(); e.stopPropagation(); selectItem(this) });
}
return ul;
};
function requestData(q) {
if (!options.matchCase) q = q.toLowerCase();
var 데이터 = options.cacheLength ? loadFromCache(q) : null;
// 캐시된 데이터 수신
if (data) {
receiveData(q, data);
// AJAX URL이 제공된 경우 지금 데이터 로드를 시도하세요
} else if ((typeof options.url == "string") && (options.url.length > 0)) {
$.get(makeUrl(q), function(data) {
data =parseData(data);
addToCache(q, data);
receiveData(q, data);
} );
// 데이터가 발견되지 않으면 로딩 클래스를 제거합니다.
} else {
$input.removeClass(options.loadingClass);
}
};
function makeUrl(q) {
var url = options.url "?q=" escape(q);
for (var i in options.extraParams) {
url = "&" i "=" escape(options.extraParams[i]);
}
URL 반환;
};
function loadFromCache(q) {
if (!q)는 null을 반환합니다.
if (cache.data[q]) return 캐시.data[q];
if (options.matchSubset) {
for (var i = q.length - 1; i >= options.minChars; i--) {
var qs = q.substr(0, i );
var c = 캐시.데이터[qs];
if (c) {
var csub = [];
for (var j = 0; j var x = c[j];
var x0 = x[0];
if (matchSubset(x0, q)) {
csub[csub.length] = x;
}
}
csub 반환;
}
}
}
null을 반환합니다.
};
function matchSubset(s, sub) {
if (!options.matchCase) s = s.toLowerCase();
var i = s.indexOf(sub);
if (i == -1) false를 반환합니다.
return i == 0 || options.matchContains;
};
this.flushCache = function() {
flushCache();
};
this.setExtraParams = function(p) {
options.extraParams = p;
};
this.findValue = function() {
var q = $input.val();
if (!options.matchCase) q = q.toLowerCase();
var 데이터 = options.cacheLength ? loadFromCache(q) : null;
if (data) {
findValueCallback(q, data);
} else if ((typeof options.url == "string") && (options.url.length > 0)) {
$.get(makeUrl(q), function(data) {
data =parseData(data)
addToCache(q, data)
findValueCallback(q, data)
});
} else {
// 일치하는 항목 없음
findValueCallback(q, null);
}
}
function findValueCallback(q, data) {
if (data) $input.removeClass(options.loadingClass);
var num = (데이터) ? 데이터 길이 : 0;
var li = null;
for (var i = 0; i < num; i ) {
var row = data[i];
if (row[0].toLowerCase() == q.toLowerCase()) {
li = document.createElement("li");
if (options.formatItem) {
li.innerHTML = options.formatItem(row, i, num);
li.selectValue = 행[0];
} else {
li.innerHTML = 행[0];
li.selectValue = 행[0];
}
var extra = null;
if (row.length > 1) {
extra = [];
for (var j = 1; j < row.length; j ) {
extra[extra.length] = row[j];
}
}
li.extra = extra;
}
}
if (options.onFindValue) setTimeout(function() { options.onFindValue(li) }, 1);
}
function addToCache(q, data) {
if (!data || !q || !options.cacheLength) return;
if (!cache.length || 캐시.길이 > options.cacheLength) {
flushCache();
cache.length ;
} else if (!cache[q]) {
cache.length ;
}
cache.data[q] = 데이터;
};
function findPos(obj) {
var curleft = obj.offsetLeft || 0;
var curtop = obj.offsetTop || 0;
while (obj = obj.offsetParent) {
curleft = obj.offsetLeft
curtop = obj.offsetTop
}
return { x: curleft, y: curtop };
}
}
jQuery.fn.autocomplete = function(url, options, data) {
// 옵션이 있는지 확인
options = options || {};
// url을 옵션으로 설정
options.url = url;
// 일부 대량 로컬 데이터 설정
options.data = ((typeof data == "object") && (data.constructor == Array)) ? 데이터 : null;
// 필수 옵션에 대한 기본값 설정
options.inputClass = options.inputClass || "ac_입력";
options.resultsClass = options.resultsClass || "ac_결과";
options.lineSeparator = options.lineSeparator || "N";
options.cellSeparator = options.cellSeparator || "|";
options.minChars = options.minChars || 1;
options.delay = options.delay || 400;
options.matchCase = options.matchCase || 0;
options.matchSubset = options.matchSubset || 1;
options.matchContains = options.matchContains || 0;
options.cacheLength = options.cacheLength || 1;
options.mustMatch = options.mustMatch || 0;
options.extraParams = options.extraParams || {};
options.loadingClass = options.loadingClass || "ac_로딩";
options.selectFirst = options.selectFirst || 거짓;
options.selectOnly = options.selectOnly || 거짓;
options.maxItemsToShow = options.maxItemsToShow || -1;
options.autoFill = options.autoFill || 거짓;
options.width = parsInt(options.width, 10) || 0;
this.each(function() {
var input = this;
new jQuery.autocomplete(input, options);
});
// 체인을 끊지 마세요
이것을 반환하세요;
}
jQuery.fn.autocompleteArray = function(data, options) {
return this.autocomplete(null, options, data);
}
jQuery.fn.indexOf = function(e) {
for (var i = 0; i < this.length; i ) {
if (this[i] == e ) i를 반환합니다.
}
return -1;
};
성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.