jQuery autocomplate 자체 확장 플러그 인,예제 코드 자동 완성

4.567913.현재 위의 autocomplate 플러그 인의 일반적인 옵션 을 분석 합 니 다.index 는 힌트 옵션 의 밝 은 색인 을 선택 하 는 것 입 니 다.timeId 는 사용자 가 텍스트 필드 에 입력 할 때 setTimeout 을 이용 하여 ajax 요청 서버 에서 데 이 터 를 얻 고 돌아 오 는 시간 입 니 다.cssOptions 는 자동 알림 옵션 의 스타일 입 니 다.기본 스타일 을 보 여 줍 니 다
 
, IE6+、Firefox3.5+
autocomplate.js:
;(function ($) {
var index = -1;
var timeId;
var cssOptions = {
"border": "1px solid black",
"background-color": "white",
"position": "absolute"/*,
"font": "normal normal lighter 14px 6px Times New Roman"*/
};
var defaults = {
width: "auto",
highlightColor: "#3399FE",
unhighlightColor: "#FFFFFF",
css: cssOptions,
dataType: "xml",
paramName: "word",
delay: 500,
max: 20
};
var keys = {
UP: 38,
DOWN: 40,
DEL: 46,
TAB: 9,
ENTER: 13,
ESC: 27,
/*COMMA: 188,*/
PAGEUP: 33,
PAGEDOWN: 34,
BACKSPACE: 8,
A: 65,
Z: 90
};
$.fn.extend({
autocomplete: function (sUrl, settings) {
sUrl = (typeof sUrl === "string") ? sUrl : "";
var param = !this.attr("id") ? defaults.paramName : this.attr("id");
settings = $.extend({}, defaults, {url: sUrl, paramName: param}, settings);
var autoTip = this.autoTipTemplate(this, settings);
$("body").append(autoTip);
var $this = this;
this.keyup(function (event) {
$this.keyOperator(event, autoTip, settings);
});
/*$("input[type=button]").click(function () {
$("#result").text(" 【" + search.val() + "】 !");
$("#auto").hide();
index = - 1;
});*/
return this.each(function () {
$this.val();
});
},
autoTipTemplate: function (input, settings) {
var inputOffset = input.offset();
var autoTip = $("<div/>").css(settings.css).hide()
.css("top", inputOffset.top + input.height() + 5 + "px")
.css("left", inputOffset.left + "px");
var space = $.browser.mozilla ? 2 : 6;//
var tipWidth = (typeof settings.width === "string" && "auto") ? input.width() : settings.width;
autoTip.width(tipWidth + space + "px");
return autoTip;
},
select: function (target, index, settings, flag) {
var color = flag ? settings.highlightColor : settings.unhighlightColor;
target.children("div").eq(index).css("background-color", color);
},
keyOperator: function (event, autoTip, settings) {
var evt = event || window.event;
var autoNodes = autoTip.children("div");
var kc = evt.keyCode;
var $this = this;
/* delete */
if (kc >= keys.A && kc <= keys.Z || kc == keys.BACKSPACE || kc == keys.DEL) {
var wordText = this.val();
if (wordText.length != 0) {
var param = {};
param[settings.paramName] = wordText;
clearTimeout(timeId);
timeId = setTimeout(function () {
$.post(settings.url, param, function (data) {
var wordObj = $(data);
if (settings.dataType == "xml") {
var wordNodes = wordObj.find("word");
autoTip.html("");
wordNodes.each(function (i) {
var divNode = $("<div>").attr("id", i);
// div , div auto
divNode.html($(this).text()).appendTo(autoTip);
// ,
divNode.mousemove(function () {
// ,
if (index != -1) {
autoTip.children("div").eq(index).css("background-color", settings.unhighlightColor);
}
index = $(this).attr("id");
$(this).css("background-color", settings.highlightColor);
});
// ,
divNode.mouseout(function () {
$(this).css("background-color", settings.unhighlightColor);
});
//
divNode.click(function () {
$this.val($(this).text());
index = -1;
autoTip.hide();
});
});
if (wordNodes.length > 0) {
autoTip.show();
} else {
autoTip.hide();
index = -1;
}
}
});
}, settings.delay);
} else {
autoTip.hide();
index = -1;
}
} else if (kc == keys.UP || kc == keys.DOWN) {/* */
if (kc == keys.UP) {//
if (index != -1) {
autoNodes.eq(index).css("background-color", settings.unhighlightColor);
index--;
} else {
index = autoNodes.length - 1;
}
if (index == -1) {
index = autoNodes.length - 1;
}
autoNodes.eq(index).css("background-color", settings.highlightColor);
} else {//
if (index != -1) {
autoNodes.eq(index).css("background-color", settings.unhighlightColor);
}
index++;
if (index == autoNodes.length) {
index = 0;
}
autoNodes.eq(index).css("background-color", settings.highlightColor);
}
} else if (kc == keys.PAGEUP || kc == keys.PAGEDOWN) {
event.preventDefault();
if (kc == keys.PAGEUP) {
if (index != -1) {
autoNodes.eq(index).css("background-color", settings.unhighlightColor);
}
if (autoNodes.length > 0) {
index = 0;
autoNodes.eq(0).css("background-color", settings.highlightColor);
}
} else {
if (index != -1) {
autoNodes.eq(index).css("background-color", settings.unhighlightColor);
}
index = autoNodes.length - 1;
autoNodes.eq(index).css("background-color", settings.highlightColor);
}
} else if (kc == keys.ENTER) {
//
//
if (index != -1) {
$this.val(autoNodes.eq(index).text());
} else {//
$("body").append($("<div/>").text(" 【" + $this.val() + "】 !"));
$this.get(0).blur();
}
autoTip.hide();
index = -1;
} else if (kc == keys.ESC) {
autoTip.hide();
}
}
});
})(jQuery);
keys 는 키보드 키 에 대응 하 는 값 입 니 다.autocomplete 는 호출 된 함수 입 니 다.ajax 가 요청 한 url 을 설정 하고 위의 defaults 에 나타 난 인 자 를 설정 할 수 있 습 니 다.이 방법 은 텍스트 필드 의 값 을 되 돌려 줍 니 다.autoTipTemplate 는 입력 할 때 표시 되 는 알림 상자,알림 메뉴 로 jquery 대상 을 되 돌려 줍 니 다.select 는 알림 메뉴,즉 알림 메뉴 를 내 려 오 는 하 이 라이트 옵션 입 니 다.target 은 당연히 대상 입 니 다.index 는 곧 하 이 라이트 가 될 옵션 의 색인 입 니 다.settings 는 하 이 라이트 색상 설정 입 니 다.이것 은 기본 defaults 에 있 습 니 다.$.extend 방법 을 통 해 defaults 대상 의 속성 을 settings 대상 에 할당 합 니 다.key Operator 는 텍스트 필드 를 위 한 키보드 작업 입 니 다.이것 은 핵심 함수 입 니 다.조작 알림,자동 완성 은 그것 에 달 려 있다.html 코드 를 살 펴 보 겠 습 니 다.autocomplate 플러그 인 을 어떻게 호출 하 는 지 보 겠 습 니 다.어때요?물론 뒤에 다른 설정 도 추가 할 수 있 습 니 다.예 를 들 어 코드 세 션
 
var defaults = {
width: "auto",//
highlightColor: "#3399FE",//
unhighlightColor: "#FFFFFF",//
css: cssOptions,
dataType: "xml",//ajax
paramName: "word",//ajax , id,
delay: 500,// ,ajax
};
이렇게 해도 됩 니 다.Autocomplata WordServlet 의 코드 를 보 세 요
 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Ajax , Google </title>
<meta http-equiv="author" content="hoojo">
<meta http-equiv="email" content="[email protected]">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="jslib/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="jslib/jquery.autocomplete-1.2.js"></script>
<script type="text/javascript">
$(function () {
$(":text").autocomplete("AutocomplataWordServlet", {dataType: "xml", width: "auto"});
});
</script>
</head>
<body>
:<input type="text" />
<input type="button" value="Go" /><br/><br/>
</body>
</html>
할 말 이 없습니다.클 라 이언 트 텍스트 필드 의 ajax 요청 키 워드 를 가 져 온 다음 jsp 페이지 에서 단 어 를 걸 러 내 는 것 입 니 다.하지만 클 라 이언 트 에서 정규 나 서버 에서 정규 로 걸 러 낼 수도 있 습 니 다.다음은 워드.jsp 의 내용 을 살 펴 보 겠 습 니 다
 
$(":text").autocomplete("AutocomplataWordServlet", {
width: "auto",
highlightColor: "#3355FE",
unhighlightColor: "#FFFFcc",
css: {border: "2px solid red"},
dataType: "xml",
paramName: "keyWord",
delay: 300
});
xml 형식의 문서 입 니 다.jstl 표현 식 을 사용 하여 starts With 함수 로 일치 합 니 다.통과 하면 xml 내용 에 나타 나 고 위의 contentType="text/xml"도 볼 수 있 습 니 다.charset=UTF-8"없습니다.text/xml 입 니 다!이 점 은 어떤 브 라 우 저 를 설정 하지 않 으 면 해석 할 수 없 음 을 주의해 야 한다.저자:hoojo blog:http://blog.csdn.net/IBM_hoojo

좋은 웹페이지 즐겨찾기